✅最新のChromeで画像付箋が表示されない
まとめ
ChromeがHTTPSのページからHTTPの画像を読まなくなった
画像はキャンバス汚染の解決のためにヘッダをいじる必要があり、EC2で立てたプロキシサーバを通していた、これがHTTPであった
サーバをherokuに移して解決
herokuがgunicornにワイルドカード証明書を使っている
自分で証明書を取ってgunicornを挟んでEC2でやるのでもOKのはず
---
現象
PCで画像付箋が表示されない
PCでScrapbox付箋のアイコンが表示されない
参考
>EC2-nanoでプロキシ立てた
このプロキシがHTTPだが、最新のChromeはもはやHTTPSのページからHTTPへのリクエストを許さない
Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure element 'http://...'. This request was automatically upgraded to HTTPS, For more information see >This feature will autoupgrade optionally-blockable mixed content (HTTP content in HTTPS sites) by rewriting the URL to HTTPS, without a fallback to HTTP if the content is not available over HTTPS. Image mixed content autoupgrades by default are targeted for M86.
今までは画像に関してはデフォルトではオートアップグレードしなかったが、M86からするように変わった。このオートアップグレードはHTTPにフォールバックしないのでHTTPのみでサーブされてる画像は表示不能になる。
→ net::ERR_SSL_PROTOCOL_ERROR
Chrome M86から
解決方法案
Flaskで書いたサーバをHTTPSにする
他の方法
AWS Lambdaとか？
手前にcloudflareを置く
なぜLambdaじゃないのだっけ？
バイナリデータを返すのが手間だったから
herokuに置いたAPIサーバは問題なく動いてる、なぜ？
gunicornを挟んでいるのでそこでHTTPSになる
Related Pages
- →regroup×表札のないグループを畳んだら一番左上を表札にする×付箋を含まないグループを畳むとサムネイル表示する×グループの中での場所変更×表札の事後的変更×regroupでのグループ化のデモ×状態名と変数を束ねて型で制約×グループから枠線を取り去る×テキスト入力の簡素化×パス描画の高速化×事後的に保存できる×線の色・太さ・点線を変更×外部リンク付箋を新しいタブで開く×ゴーストドラッグ×ハンバーガーメニュー×scrapboxの各ページをアイテムとして表示して整理×付箋に画像を表示×regroup_リリースノート→
- →pregroup2020×動作テスト項目×枠のないテキストは必要か？×グループに表札は必要ないのでは×付箋の選択・圧縮_ui設計×グループの中の付箋をドラッグで出し入れ・配置変更×グループを作りたい時、そのグループの表札が既に存在する×付箋に改行を入れる方法が必要×キャンバス汚染×座標を埋め込んだ共有リンクを作成×ハンバーガーメニュー×github_pagesで編集ページをsandboxとして公開×未保存の変更がある場合に「失う可能性があります」アラート×編集者のロード時は全体が見えるズーム×画面外の付箋のアンビエント表示が必要×投げ縄モードで付箋をマウスダウンした場合、付箋の移動であるべきでは×画像を手軽に追加したい×レンダリング処理がパスドローをブロックする×付箋をシュッと複製したい×既存付箋の編集のために付箋クリックでバルーンメニュー×外部リンク付箋×バルーンメニュー×付箋へのパーマリンク×付箋を重ならないようにする×スマホから音声入力でどんどんメモを追加したい×長い文章を刻む機能×適度に分割された付箋を作る機能×長文をscrapboxに追い出す×講義資料作成の時に作ったマップをデジタル化して公開×付箋自動配置ではなく関連付箋サジェスト×順序情報付与×他のマップで再利用したい×再利用の経路が見えると面白い？×ながら書き出し×文脈情報の付与×最終成果物に使われなかった断片の再利用×思いっきりズームアウトしたら壊れるバグ×不用知も構造化される×消しゴムによるパスの削除(必要？)×自分の作ったマップの一覧表示×ハッシュが指定されていないときにリンクを出したい×paper.jsをupdateすると型エラーが大量に出る×複数行インポートの支援×パスの自動グループ化×オフライン編集の時にリロードして更新を失わないようにする×イベント座標系の問題×pc版にはショートカットキーがあると良い×大きい画像を貼り付ける×表札のないグループ×付箋が出典を記憶すべき×ズームの上限を付箋画面いっぱいに？×コピー＆ペースト→
- →regroup×pregroup-done-2019×2020_年、_react_軸で学ぶべき技術×typescript×react×webpack×visual_studio_code×styled-components×reactmodal×ipadはfocusを無視することがある×paper.js×パスドロー×パスの形がおかしい×付箋・パスの投げ縄選択×firestore×websocket×amazon_s3×netlify×apple_pencil×ipad上でのダイレクトタッチとpencilタッチの区別×二本指ジェスチャでズームと平行移動×redux×reactn×undoの実装×キャンバス汚染×キャンバス汚染解決編×cssで条件分岐と変数と計算を使う×100vhだと縦にはみ出す×メニューアイコンがiphoneなどの狭い画面ではみ出す×ズームアウトした状態でペンで描くとガタガタになる×線の太さを一定にする×paper.jsの更新後に呼ばれるコールバックをつける×バルーンメニュー×投げ縄選択→削除×付箋の自動フォントサイズ調整×gが下に突き出す×okr問題×regroup2019→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]