0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

httpで制限される機能をhttpで使用する方法

Posted at

こんにちは。じゅに(@Jyu210_engineer)です。

前回はHTTP通信でブラウザで制限される主な機能の一覧という記事を書きました。

現状、Webに公開されていてhttpというアプリやサービスはほとんどないので、あまり気にする必要はないとは思いますが、オンプレで社内ネットワーク上でWebアプリを提供する場合には、httpで導入する例もまだあると思います。
社内ネットワークなのでセキュリティ的に担保されている(注意が必要な要素はもちろんある)という前提なので、構築が楽なhttpが選択されるのでしょう。

そこで、まだまだ一定のニーズがあると思われるhttpでのWebアプリの導入。
前回の記事で紹介した機能を使用しないのであれば問題ありませんが、機能の中にはカメラやマイク機能など比較的使用する可能性があります。
それらを使用しようと思うと社内ネットワークであろうが、httpsでアプリを公開する必要が出てきてしまいます。

httpsに使用としても自己署名証明書を使用すれば、証明書発行などの工数はかかるものの、比較的簡単に無料でhttpsで構築することは可能です。
しかし、それすらも煩わしい、すでにhttpという記載が色々な箇所にあるために修正が大変なので、httpで導入したいと考えたくなります。

そのため、今回はhttpで制限される機能をhttpで使用するための対処方法を紹介します。

対処方法

結論から言うと対処方法は1つしかありません。

それは、ブラウザ特定のサイトを「セキュア(安全)」と見なすように設定できる開発者向けの設定を有効にすることです。

この設定は以下のChromium系のブラウザで設定が可能となっています。

  • Google Chrome
  • Microsoft Edge
  • Brave
  • Vivaldi
  • Opera

この中ではGoogle ChromeかMicrosoft Edgeが使用される機会が多いのではないでしょうか。

残念ながらFireFoxやSafariでは設定ができないので注意が必要です。

設定内容

ChromeとEdgeに絞ってですが、具体的な設定内容を書いていきます。

Google Chrome

Chromeを起動し、アドレスバーに以下を入力します。

chrome://flags/#unsafely-treat-insecure-origin-as-secure

そうすると以下のような設定画面が開きます。

スクリーンショット 2025-04-14 22.21.24.png

Insecure origins treated as secure
の欄にセキュアとみなしたいhttpオリジン(http://example.com:80など)を入力し、「停止中」を「有効」に設定し、ブラウザを再起動すると設定完了です。
(httpオリジンはカンマ区切りで複数設定可能です)

スクリーンショット 2025-04-14 22.26.30.png

Microsoft Edge

Edgeの場合もChromeとほぼ変わりません。

Edgeを起動してアドレスバーに以下を入力します。

edge://flags/#unsafely-treat-insecure-origin-as-secure

そうするとInsecure origins treated as secureの設定が出てくるので、セキュアとみなしたいhttpオリジンを入力、設定を有効化してEdgeを再起動すると設定完了です。

※手元にMacしかないのでEdgeの画像はありません・・・

注意事項

この設定を使用するにはいくつかの注意点があります。

  • あくまで開発者向けの設定であること(商用利用はできなくはないですが、推奨されない)
  • ブラウザの今後のアップデートで使用できなくなる可能性があること

大きくはこの2点ですね。
ブラウザのアップデートでいつ使用できなくなるかも分からないですし、開発者向けの機能になるので、お客様に導入となると避けたほうが無難だとは思いますが、一時的な処置としては有効かと思います。

補足:httpオリジン、httpsオリジンとは

オリジンとは「スキーム(プロトコル)」「ホスト(ドメイン)」「ポート番号」の3つのセットのことになります。
例えばhttp://example.com:80の場合は

  • スキーム(プロトコル):http
  • ホスト(ドメイン):example.com
  • ポート番号:80

になります。
普通に言うとWebサイトやアプリのURLですね。

最後に

前回のHTTP通信でブラウザで制限される主な機能の一覧という記事から、その中でもhttpのままブラウザで制限される機能を使用する方法を調べてみました。

注意事項でも書きましたが、ブラウザのアップデートでいつまで使用できるか分からないことと、開発者向けの機能になるのでお客様導入となると、いくら閉じられた社内ネットワークとはいえ、httpsで導入するのが良いと思います。

ちなみに本当に開発向け(サーバーもクラアインとも自PC)ということであれば、設定せずともlocalhostであれば、機能制限はされないことも覚えておきましょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?