[日本語](README.md) | **English**
# NagiManga (manga viewer)
[](#demo)
[](README-LOG.en.md)
[](https://github.com/Lichiphen/NagiSwipe/releases/latest)
[](https://github.com/Lichiphen/NagiSwipe)
[](https://gitlab.com/lichiphen/nagiswipe)
[](https://nagiswipe.pages.dev/nagimanga.en.html)
[](#two-ways-to-use-it)
[](../LICENSE)
The manga viewer of NagiSeries ([NagiSwipe](../README.en.md#nagiswipe), NagiManga and [NagiLog](README-LOG.en.md)).
Paste **a single tag** into your blog or site, and a manga viewer opens when it is clicked. Works are managed in a small admin panel (PHP) that needs no database.
Since v0.4.0, NagiManga includes NagiLog, a personal log for posting text, pictures and manga.
It has a posting screen for phones, bold text, picture replacement, manga cards, categories, six designs and URLs made from the date and time. Since v0.6.0 it can also post video and audio.
How to use it, its strengths and weaknesses, installation and test results are in the [NagiLog README](README-LOG.en.md).
[](https://lichiphen.com/tool/link/r/NagiManga)
[](https://nagiswipe.pages.dev/nagimanga.en.html)
The admin panel can be shown in Japanese or English (see [Admin panel language](#admin-panel-language)). Some names of buttons and menus below are given in Japanese too, as they appear in the Japanese panel.
## Contents
- [Demo](#demo)
- [What it does](#what-it-does)
- [Two ways to use it](#two-ways-to-use-it)
- [With the admin panel (PHP)](#with-the-admin-panel-php)
- [1. Upload](#1-upload)
- [2. Setup](#2-setup)
- [3. Checks after installing](#3-checks-after-installing)
- [4. Make a work and share it](#4-make-a-work-and-share-it)
- [Posting to Tegalog](#posting-to-tegalog)
- [Features](#features)
- [Making a work from EPUB](#making-a-work-from-epub)
- [Light versions (for phones)](#light-versions-for-phones)
- [Passwords (limited release)](#passwords-limited-release)
- [Backup](#backup)
- [Updates (v0.2.0 and later)](#updates-v020-and-later)
- [Admin panel language](#admin-panel-language)
- [Embed code](#embed-code)
- [Work pages (share links, v0.3.0 and later)](#work-pages-share-links-v030-and-later)
- [Hotlink protection (advanced, v0.3.0 and later)](#hotlink-protection-advanced-v030-and-later)
- [Access analytics (v0.13.0 and later)](#access-analytics-v0130-and-later)
- [Plugins (guest mode)](#plugins-guest-mode)
- [Two-step login (v0.9.1 and later, optional)](#two-step-login-v091-and-later-optional)
- [Passkeys (v0.10.0 and later, optional)](#passkeys-v0100-and-later-optional)
- [Troubleshooting](#troubleshooting)
- [Protecting the data folder](#protecting-the-data-folder)
- [Tighter IP restriction for the admin panel (optional)](#tighter-ip-restriction-for-the-admin-panel-optional)
- [Without PHP (FTP only)](#without-php-ftp-only)
- [Security approach](#security-approach)
- [Attack tests](#attack-tests)
- [Development](#development)
- [License](#license)
## Demo
**https://notebook.lichiphen.com/nagimanga/demo.html**
- Try the ways of reading (right to left with spreads / left to right / vertical, as paged manga or webtoon)
- There is a password-protected sample (the password is `demo`) and a work imported from a CLIP STUDIO PAINT EPUB
- "ゲストとして管理画面を見る" (view the admin panel as a guest) shows the author's admin panel, read only (nothing can be changed)
**NagiLog demo: https://notebook.lichiphen.com/nagimanga/**
- The log the author actually uses. You can see posts, the phone menu, the mail dialog and the 404 page (inside a black hole)
- Screenshots and explanations are in the [NagiLog README](README-LOG.en.md#screens)
**If you are deciding whether to use it, or want to keep using it for years:** strengths and weaknesses, the technology used and how to take your data out are in [docs/overview.en.md](docs/overview.en.md) (for non-developers).
## What it does
**For readers (the viewer)**
- Right to left (manga) / left to right / vertical (paged manga, each page fitted to the screen, and full-width webtoon)
- Spreads on wide screens (with or without a single cover page). A wide single picture becomes its own page automatically
- Page turning: swipe, tap the screen edges, the ◀ ▶ buttons on the bottom bar, the keyboard, the mouse wheel (vertical reading can also be dragged with the mouse)
- Zoom: pinch, double tap, and on computers the "− 100% ＋" buttons on the top bar, the `+` `-` `0` keys and Ctrl + wheel (move the mouse near the top or bottom edge to show the bars)
- Bookmark (the next time it opens where you stopped), the browser's Back closes it
- Small pictures (light versions) on phones and large ones (normal versions) on computers and when zoomed, chosen automatically
**For creators (the admin panel)**
- Drag and drop pictures, reorder them, issue share tags (the URL is made from the domain you installed on)
- **Make a work directly from a manga EPUB**, such as one from CLIP STUDIO PAINT
- Password-protected releases (readers enter the password when they click)
- Backup and restore (one ZIP)
- A plugin that shows the admin panel to guests, read only (for demos)
It uses no database and no outside libraries (only the standard features of PHP and JavaScript).
## Two ways to use it
| | With the admin panel (PHP) | Without PHP (FTP only) |
|---|---|---|
| For | People who want to manage works in an admin panel (FTP only for the first upload) | People who know their way around folders and URLs |
| Adding pictures | Drag and drop in the admin panel, or from EPUB | Upload with FTP |
| Password protection | Yes | No (anyone who knows a picture's URL can see it) |
| Needs | PHP 8.1 or later (GD, fileinfo, mbstring, ZipArchive); a server where `.htaccess` works (Apache family) is recommended | Any server that can serve static files |
---
## With the admin panel (PHP)
### 1. Upload
Download the latest ZIP (`nagimanga-vX.Y.Z.zip`) with the **Download** button below. Upload what is inside the ZIP (or the contents of `manga/server` in this repository) to any place on your server, under a name such as `nagimanga`.
[](https://lichiphen.com/tool/link/r/NagiManga)
```
nagimanga/
├── read.php the window for readers (read only)
├── index.php the public entrance of NagiLog (no file name needed in the URL)
├── log.php the log itself, and redirects from older URLs
├── .htaccess
├── admin/ the admin panel
├── viewer/ the viewer (NagiManga.js / NagiManga.css)
├── plugins/ where plugins go (empty at first)
├── lib/ the program (not visible from outside)
└── data/ pictures and settings of the works (not visible from outside)
```
- Make the `data` folder writable (on most servers the default 755 is fine).
> [!WARNING]
> **Do not forget to upload `.htaccess`.** Some FTP programs hide files starting with `.` and do not send them (turn on "show hidden files" to see them). There are five: in `nagimanga/`, `admin/`, `lib/`, `data/` and `plugins/`.
### 2. Setup
1. Open `https://your-site/nagimanga/admin/` in a browser. The setup screen appears. **Only now does the server make `data/setup-key.php` (the setup key).** Uploading alone does not make it.
2. Open `data/setup-key.php` with FTP (or the server's file manager). If your FTP app does not show it, refresh the listing. The setup screen also shows how, under "How to find the setup key".
3. Paste the "setup key" written in it (20 characters, like `ABCDE-FGHJK-LMNPQ-RSTUV`) into the field on the screen. Lower case and spaces do not matter.
The file looks like this. The third line, shaped like `XXXXX-XXXXX-XXXXX-XXXXX`, is the key (every site has its own).
4. Choose the administrator password (10 characters or more). It is not made for you.
5. Under "What you will mostly use", pick **NagiLog** (a diary, blog or photos) or **NagiManga** (manga) with the large buttons. It is the screen that opens first after you log in. Either way you can use both, and you can switch on the login page at any time.
- Turn on "allow the admin panel only from the current IP address" whenever you can.
> [!IMPORTANT]
> Only whoever installed the site can read the key, over FTP (it cannot be read from the web). Even if someone else or a bot opens a freshly uploaded site first, they cannot set it up without the key. `data/setup-key.php` is deleted when the setup is done. The "within 30 minutes" limit of v0.11 and earlier is gone.
> [!IMPORTANT]
> When it is done, **the login URL** is shown. **Bookmark it.** Opening the admin panel directly gives "Not Found". Since v0.10.0 the setup ticks "Log in only from the secret login URL" by default. Then `admin/login.php` and the address without `k=` say "Not Found", and the LOG shows no Log in link. Settings → "Common and safety" → "Way in to log in" opens the LOG’s Log in link (`admin/login.php`) again (installs from v0.9 and earlier keep it open). The IP restriction and the limit on attempts apply to both.
>
> The login page lets you choose what opens after logging in (NagiLog or NagiManga) with large buttons; the choice is kept for next time. A browser that has not chosen yet starts with what you picked under "What you will mostly use" in the setup. The login URL with `&p=log` added (shown as "For NagiLog" on the finished screen and under Login URL in the settings) starts with NagiLog chosen.
#### After the first login: two-step login
While neither a passkey nor the two-step login (codes from an authenticator app) is set up, every login shows a dialog that suggests adding one. With either of them, a known password is no longer enough to log in. Set one up here if you can.
- **Register a passkey**: log in with a fingerprint, face or PIN.
- **Set up an authenticator app**: use the 6-digit codes of the iPhone Passwords app, Google Authenticator and the like.
- **Later**: closes it for now. It comes back at the next login.
- **Don’t show this again**: never shows it again. You can still set either up later under Two-step login or Passkeys in the settings.
### 3. Checks after installing
- Log in with the bookmarked URL and make sure the work list **does not show the warning "the data folder can be seen from the internet"** (if it does, `.htaccess` did not arrive or does not work; see "Protecting the data folder" below)
- Opening `https://your-site/nagimanga/data/` gives an error such as "Forbidden", not the contents
- Opening `https://your-site/nagimanga/admin/` as it is gives "Not Found" (proof that setup is done)
### 4. Make a work and share it
1. Make a work in the admin panel and drag and drop the page pictures all at once (they are ordered by file name: 001, 002, …). If you have an EPUB, use "EPUB から作る" (make from EPUB).
2. On the work's page, choose the reading direction and spreads under "共有用のタグ" (share tag), press "コピー" (Copy) and paste it into your blog's HTML.
```html
Read chapter 1
```
| Attribute | Value |
|---|---|
| `data-direction` | `rtl` (right to left) / `ltr` (left to right) / `vertical` (vertical reading) |
| `data-view` | `auto` (spreads on wide screens) / `single` (always one page) |
| `data-cover` | `1` (page 1 alone, spreads start on odd pages) / `0` (spreads from page 1) |
| `data-vertical` | For vertical reading: omitted (paged manga: one page fits the screen height) / `webtoon` (full width, at most 900px) |
- One `
```
Picture locations in `manifest.json` are relative to the place of `manifest.json` (or full URLs).
```json
{ "title": "Chapter 1", "direction": "rtl", "pages": [ { "src": "001.jpg", "w": 1200, "h": 1700 } ] }
```
---
## Security approach
- **The public side is read only.** All `read.php` can do is "list a work's pages", "check a password" and "return a picture". Every odd request gets the same "Not Found", telling nothing about what exists.
- **Five locks on the admin panel.** IP restriction → secret login URL → password (locked after a number of failures, for a time, both set in the settings: 5 and 15 minutes by default; at most 40 per hour overall; when turned on, then a code from an authenticator app; or, once registered, a passkey instead) → a session bound to the browser (30 days from the last login, up to 1 year in the settings) → CSRF protection on every action.
- **Other people's failures do not shut the owner out.** A browser that has logged in gets the owner's mark (a cookie signed with the server's secret key). Marked browsers, passkeys and allowed IP addresses still get in after the overall limit (40 per hour) is reached. A marked browser is counted by browser, not by IP, and loses the mark's privilege after 5 failures. Changing the password voids every mark.
- **IPv6 is counted by range.** Failures from IPv6 are counted per /64 (the range one line gets). A work's reader password and a locked post check answers one at a time, 20 seconds apart (v0.12.1 and later; earlier versions stopped them for the hour), after 60 wrong answers per hour for that work or post together. A new reader is held for a moment instead of being shut out for the hour (when it is busy, they are asked to try again in a minute; readers who already opened it keep reading).
- **Uploaded pictures are always redrawn.** Whether a file is a picture is judged from its contents, not its name; it is read with GD and written to a new file. Programs hidden in pictures and data such as the shooting location do not survive. File names are given anew. SVG is not accepted for manga pages. EPUB and backup ZIPs are also checked item by item before use.
- **Programs do not run in the picture folders.** `data` cannot be seen from outside, and only `.webp` / `.jpg` are stored.
- **Error details are not shown on screen.** So that server paths and the like do not leak. Records go to `data/logs/security.log.php`, which can be read on the settings page of the admin panel. Being a PHP file, it cannot be read from the web even on servers that ignore `.htaccess` (nginx and others).
### Attack tests
[`dev/attack_test.py`](dev/attack_test.py) runs the normal checks and reproduced attacks together. With Python 3 and PHP 8.1 or later (GD, fileinfo, zip, mbstring, sodium or openssl) nothing else needs installing. The log is checked with [`dev/log_test.py`](dev/log_test.py).
```bash
python dev/attack_test.py
```
What the attack tests check
What it covers: PHP disguised as a picture, uploads of `.htaccess` / SVG / HTML, pixel bombs, escaping folders with `../`, ZIP slip and ZIP bombs, malicious EPUBs (XXE, DRM, paths pointing outside the book), CSRF, XSS, forged, tampered, expired and reused viewing keys, brute force (including forged `X-Forwarded-For`), getting around the IP restriction, the setup key, unsigned or swapped update packages, odd Host headers, changes by guests (19 kinds) and information leaks on servers where `.htaccess` does not work. The results are written to `dev/results/attack-report.md`.
[`dev/hardening_test.py`](dev/hardening_test.py) tries attacks from many IP addresses (made with `X-Forwarded-For`): that the owner is not shut out by the site-wide limit, that IPv6 counts per /64, the limit per work, guessing the password from a logged-in screen, and the log without `.htaccess`.