Skip to content

Commit e794860

Browse files
cola119cola119
authored
doc: improve documentation on how to convert to HTTPS (#10)
* doc: improve documentation on how to convert to HTTPS * doc: improve documentation on how to convert to HTTPS * doc: update README
1 parent db3d92b commit e794860

File tree

3 files changed

+63
-6
lines changed

3 files changed

+63
-6
lines changed

‎README.md

+21-2
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,27 @@ liff.init({ liffId: 'liff-xxxx' }).then(() => {
7777
});
7878
```
7979

80+
### 4. Open ChromeDevTools
81+
82+
After `liff.init`, LIFF Inspector Server shows the devtools URL for your LIFF App in console.
83+
84+
```diff
85+
$ npx @line/liff-inspector
86+
Debugger listening on ws://{IP Address}:9222
87+
88+
+ connection from client, id: xxx
89+
+ DevTools URL: devtools://devtools/bundled/inspector.html?wss=8a6f-113-35-87-12.ngrok.io/?hi_id=xxx
90+
```
91+
92+
Open the URL starts with `devtools://devtools/` and enjoy debugging!
93+
8094
## Important: LIFF Inspector Server need to be served over SSL/TLS
8195

8296
By default, LIFF Inspector Server starts a local server on `ws://localhost:9222`, and your LIFF App is served over HTTPS (`https://liff.line.me/xxx-yyy`). LIFF Inspector Plugin will try to connect to `ws://localhost:9222` from `https://liff.line.me/xxx-yyy` but this will fail due to [mixed content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content).
8397

8498
To eliminate mixed content, you need to serve LIFF Inspector Server over HTTPS (`wss://`). We have two recommended ways:
8599

86-
### Serve local server over HTTPS
100+
### Serve local server over HTTPS via 1 or 2
87101

88102
1. Using [ngrok](https://ngrok.com/) to make LIFF Inspector Server public
89103
1. Run ngrok
@@ -95,10 +109,13 @@ To eliminate mixed content, you need to serve LIFF Inspector Server over HTTPS (
95109
$ node -e "const res=$(curl -s -sS http://127.0.0.1:4040/api/tunnels); const url=new URL(res.tunnels[0].public_url); console.log('wss://'+url.host);"
96110
wss://xxxx-xxx-xxx.ngrok # Copy this url
97111
```
112+
113+
Or
114+
98115
2. Running LIFF Inspector Server with HTTPS using mkcert
99116
- See the detail explanation: [How to use HTTPS for local development - web.dev](https://web.dev/how-to-use-local-https/)
100117

101-
### Set HTTPS URL to LIFF Inspector Plugin
118+
### Set HTTPS URL to LIFF Inspector Plugin via 1 or 2
102119

103120
Once LIFF Inspector Server runs over HTTPS, you need to specify its origin to LIFF Inspector Plugin.
104121

@@ -108,6 +125,8 @@ Once LIFF Inspector Server runs over HTTPS, you need to specify its origin to LI
108125

109126
![image](https://user-images.githubusercontent.com/22386678/164425138-43c5bdcb-01b9-4107-9b8a-cc86cb65015f.png)
110127

128+
Or
129+
111130
2. Use `origin` config of LIFF Inspector Plugin
112131

113132
```ts

‎README_ja.md

+21-2
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,28 @@ liff.init({ liffId: 'liff-xxxx' }).then(() => {
7575
});
7676
```
7777

78+
### 4. ChromeDevTools を開く
79+
80+
`liff.init`完了後、LIFF Inspector Server は devtools の URL をコンソールに表示します。
81+
82+
```diff
83+
$ npx @line/liff-inspector
84+
Debugger listening on ws://{IP Address}:9222
85+
86+
+ connection from client, id: xxx
87+
+ DevTools URL: devtools://devtools/bundled/inspector.html?wss=8a6f-113-35-87-12.ngrok.io/?hi_id=xxx
88+
```
89+
90+
`devtools://devtools/` で始まる URL を Google Chrome で開き、デバッグを開始してください。
91+
7892
## 重要: LIFF Inspector Server は SSL/TLS で暗号化される必要があります
7993

8094
LIFF Inspector Server はデフォルト設定ではローカルサーバー `ws://localhost:9222` を立ち上げます。そしてデバッグ対象の LIFF アプリは HTTPS (`https://liff.line.me/xxx-yyy`) でホストされています。
8195
これは LIFF Inspector Plugin が `https://` から `ws://` へ接続を試みることを意味し、[mixed content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content) となりこの接続はブロックされてしまいます。
8296

8397
Mixed content の問題を解消するために、LIFF Inspector Server は HTTPS (`wss://`) でホストされる必要があります。これを達成するために、以下の２つの方法をおすすめします。
8498

85-
### HTTPS で LIFF Inspector Server を起動する
99+
### HTTPS で LIFF Inspector Server を起動する (1 または 2 の方法)
86100

87101
1. [ngrok](https://ngrok.com/) を使い LIFF Inspector Server を外部公開する
88102
1. ngrok を実行
@@ -94,10 +108,13 @@ Mixed content の問題を解消するために、LIFF Inspector Server は HTTP
94108
$ node -e "const res=$(curl -s -sS http://127.0.0.1:4040/api/tunnels); const url=new URL(res.tunnels[0].public_url); console.log('wss://'+url.host);"
95109
wss://xxxx-xxx-xxx.ngrok # Copy this url
96110
```
111+
112+
Or
113+
97114
2. [mkcert](https://github.com/FiloSottile/mkcert) を使い LIFF Inspector Sever を HTTPS 化する
98115
- [How to use HTTPS for local development - web.dev](https://web.dev/how-to-use-local-https/) を参照してください。
99116

100-
### HTTPS 化された URL を LIFF Inspector Plugin に設定する
117+
### HTTPS 化された URL を LIFF Inspector Plugin に設定する (1 または 2 の方法)
101118

102119
LIFF Inspector Server が HTTPS 化された後、その URL を LIFF Inspector Plugin に設定する必要があります。
103120

@@ -107,6 +124,8 @@ LIFF Inspector Server が HTTPS 化された後、その URL を LIFF Inspector
107124

108125
![image](https://user-images.githubusercontent.com/22386678/164425138-43c5bdcb-01b9-4107-9b8a-cc86cb65015f.png)
109126

127+
Or
128+
110129
2. LIFF Inspector Plugin の `origin` 設定を使う
111130

112131
```ts

‎packages/liff-inspector/README.md

+21-2
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,27 @@ liff.init({ liffId: 'liff-xxxx' }).then(() => {
7575
});
7676
```
7777

78+
### 4. Open ChromeDevTools
79+
80+
After `liff.init`, LIFF Inspector Server shows the devtools URL for your LIFF App in console.
81+
82+
```diff
83+
$ npx @line/liff-inspector
84+
Debugger listening on ws://{IP Address}:9222
85+
86+
+ connection from client, id: xxx
87+
+ DevTools URL: devtools://devtools/bundled/inspector.html?wss=8a6f-113-35-87-12.ngrok.io/?hi_id=xxx
88+
```
89+
90+
Open the URL starts with `devtools://devtools/` and enjoy debugging!
91+
7892
## Important: LIFF Inspector Server need to be served over SSL/TLS
7993

8094
By default, LIFF Inspector Server starts a local server on `ws://localhost:9222`, and your LIFF App is served over HTTPS (`https://liff.line.me/xxx-yyy`). LIFF Inspector Plugin will try to connect to `ws://localhost:9222` from `https://liff.line.me/xxx-yyy` but this will fail due to [mixed content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content).
8195

8296
To eliminate mixed content, you need to serve LIFF Inspector Server over HTTPS (`wss://`). We have two recommended ways:
8397

84-
### Serve local server over HTTPS
98+
### Serve local server over HTTPS via 1 or 2
8599

86100
1. Using [ngrok](https://ngrok.com/) to make LIFF Inspector Server public
87101
1. Run ngrok
@@ -93,10 +107,13 @@ To eliminate mixed content, you need to serve LIFF Inspector Server over HTTPS (
93107
$ node -e "const res=$(curl -s -sS http://127.0.0.1:4040/api/tunnels); const url=new URL(res.tunnels[0].public_url); console.log('wss://'+url.host);"
94108
wss://xxxx-xxx-xxx.ngrok # Copy this url
95109
```
110+
111+
Or
112+
96113
2. Running LIFF Inspector Server with HTTPS using mkcert
97114
- See the detail explanation: [How to use HTTPS for local development - web.dev](https://web.dev/how-to-use-local-https/)
98115

99-
### Set HTTPS URL to LIFF Inspector Plugin
116+
### Set HTTPS URL to LIFF Inspector Plugin via 1 or 2
100117

101118
Once LIFF Inspector Server runs over HTTPS, you need to specify its origin to LIFF Inspector Plugin.
102119

@@ -106,6 +123,8 @@ Once LIFF Inspector Server runs over HTTPS, you need to specify its origin to LI
106123

107124
![image](https://user-images.githubusercontent.com/22386678/164425138-43c5bdcb-01b9-4107-9b8a-cc86cb65015f.png)
108125

126+
Or
127+
109128
2. Use `origin` config of LIFF Inspector Plugin
110129

111130
```ts

0 commit comments

Comments
 (0)