0
0

Blazor WebAssemblyアプリをHTTPSへリダイレクトさせる

Posted at

Blazor WebAssemblyを公開したはいいけど、httpでアクセスしてくる人にhttpsへリダイレクトさせるのに結構苦労したので、ここにメモを残しておきます。

前提

  • WindowsServer
  • IIS
  • Blazor WebAssemblyが既にサーバーで実行できている
  • SSL認証は既にできている

ここでの要点は3つ
1. IISのURL書き換えを設定
2. web.configをプロジェクトに加える
3. index.htmlに追記する

特に、3の「index.htmlに追記する」ことが書かれてある資料になかなかたどり着けず苦労しました。

1,IISのURL書き換えを設定

IISマネージャーにリダイレクトしてもらうためのURL書き換えのルールを追加します。
【Windows Server】IIS10でhttpのリクエストをhttpsにリダイレクトする設定」を参考にさせてもらいました。ありがとうございます。
IISマネージャーを操作してルールを追加する方法は上記のサイトを見てもらえればいいかと思いますが、将来、自分がやる時には手っ取り早く済ませたいのでweb.configに直接追記する内容を挙げておきます。
(プライベートIPアドレス)のところは各自の環境に合わせてください。
この設定の存在意義については、上に紹介させていただきましたサイトに書いてあります。非常にありがたいです。

web.config
<!-- この内容を<rules>内に追加する -->
<rule name="HTTPSリダイレクト" stopProcessing="true">
    <match url=".*" />
    <conditions>
        <add input="{HTTPS}" pattern="^OFF$" />
        <add input="{HTTP_HOST}" pattern="^localhost$" negate="true" />
        <add input="{HTTP_HOST}" pattern="^127.0.0.1$" negate="true" />
        <add input="{HTTP_HOST}" pattern="^(プライベートIPアドレス)$" negate="true" />
    </conditions>
    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" appendQueryString="false" />
</rule>

なお、web.configはサイトを配置してるフォルダ内にあります。

2,web.configをプロジェクトに加える

IIS側のweb.configをいじったところで、VisualStudioでデプロイするたびに上書きされて設定が消えてしまいます。
その為、デプロイ時に使ってもらうweb.configファイルを上記の設定内容にしてもらうよういくつか設定が必要になります。
こちらを参考にさせてもらいました。
まずは、サーバー側に出来上がっておりますweb.config(先ほど内容を追記したやつ)をプロジェクトフォルダ内にコピーします。

image.png
プロジェクトフォルダのルートにコピー


そうしましたら、次にプロジェクトファイルに下記の内容を追記します。
プロジェクト.csproj
<PropertyGroup>
    <!-- 他の設定が含まれている -->
    <IsTransformWebConfigDisabled>true</IsTransformWebConfigDisabled> <!-- 追記 -->
</PropertyGroup>

<!-- 以下を丸ごと追記 -->
<Target Name="CopyWebConfigOnPublish" AfterTargets="Publish">
	<Copy SourceFiles="web.config" DestinationFolder="$(PublishDir)" />
</Target>

これで、配置されるファイルに改良されたweb.configを使ってもらえるようになります。

3,index.htmlに追記する

こちらは、ChatGPT様に教えてもらいました。ありがとうございます。
プロジェクトの wwwroot ディレクトリにあるindex.htmlです。

index.html
<head>
    <!-- ここにメタタグを追加します -->
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
</head>

以上でhttpsへのリダイレクトが実装出来ます。
めでたしめでたし。

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