ASP.NET Coreのローカライザの違いを知らないとXSSにやられる

# 結論

ASP.NET Coreでローカライズする時には以下の３つのいずれかを使う。

- [IStringLocalizer](https://docs.microsoft.com/ja-jp/dotnet/api/microsoft.extensions.localization.istringlocalizer?view=dotnet-plat-ext-3.1)
- [IHtmlLocalizer](https://docs.microsoft.com/ja-jp/dotnet/api/microsoft.aspnetcore.mvc.localization.ihtmllocalizer?view=aspnetcore-3.1)
- [IViewLocalizer](https://docs.microsoft.com/ja-jp/dotnet/api/microsoft.aspnetcore.mvc.localization.iviewlocalizer?view=aspnetcore-3.1)

このうちIHtmlLocalizerとIViewLocalizerはHTMLのタグを含んだ文字列をローカライズするため、パラメータ部以外はHTMLエスケープされない。また、キーがない時にはそのキーをそのままHTMLエスケープせずに出力する。
そのため、外部からのパラメータをそのままローカライザに渡すような使い方をしているとXSS(クロスサイトスクリプティング)を食らうことになるので注意が必要。

# 実験環境

macOS 10.16.6
ASP.NET Core 3.1
dotnet new mvc コマンドで作成したMVCのWebアプリ

# Razorは自動的に変数出力をエスケープしてくれる

Views/Home/Index.cshtmlを以下のように書く。

```html
@{
    ViewData["Title"] = "Home Page";
    var textNotNeedEscaped = "エスケープ不要";
    var textNeedEscaped = "<script>alert(\"alert\");</script>";
}

<div class="text-center">
    <p>@textNotNeedEscaped</p>
    <p>@textNeedEscaped</p>
</div>
```

起動してページにアクセスすると、問題なく表示される。

![スクリーンショット 2020-08-15 20.50.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/0357a782-ebd6-8f22-fbb6-f2c6c4cf63d4.png)

出力された該当部分のHTMLは適切にエスケープされていることを確認。(ついでに日本語もエスケープされている。非アスキー文字はエスケープ対象ということか)

```html
<div class="text-center">
    <p>&#x30A8;&#x30B9;&#x30B1;&#x30FC;&#x30D7;&#x4E0D;&#x8981;</p>
    <p>&lt;script&gt;alert(&quot;alert&quot;);&lt;/script&gt;</p>
</div>
```

Razor(ASPのビューエンジン)の「@」での変数出力は自動的にHTMLをエスケープしてくれて、特に意識しなくてもXSSを起こしにくくなっている。

なお、あえてエスケープせずに出力する場合は、Html.Rawメソッドを使用すればよい。

```html
@{
    ViewData["Title"] = "Home Page";
    var textNotNeedEscaped = "エスケープ不要";
    var textNeedEscaped = "<script>alert(\"alert\");</script>";
}

<div class="text-center">
    <p>@textNotNeedEscaped</p>
    <p>@textNeedEscaped</p>
    <p>@Html.Raw(textNeedEscaped)</p>
</div>
```

これだと普通にalert出力される。これは意識しないと書かないので危険は少ないだろう。

![スクリーンショット 2020-08-15 20.52.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/f39fbb88-1f48-b942-5a59-cddf8aa9154e.png)

該当部分のHTMLはこうなる。当然ながらスクリプトタグがそのまま出力されている。

```html
<div class="text-center">
    <p>&#x30A8;&#x30B9;&#x30B1;&#x30FC;&#x30D7;&#x4E0D;&#x8981;</p>
    <p>&lt;script&gt;alert(&quot;alert&quot;);&lt;/script&gt;</p>
    <p><script>alert("alert");</script></p>
</div>
```

# ビューのローカライズをする場合

ローカライズするとどうなるかを見てみる。ローカライズというのは多言語対応のため、キーとなる文字列を様々な言語に置き換える処理のことで、ASP.NET Coreではそのための仕組みが用意されている。
ASP.NET Coreのローカライズについて以下のページを参照。
https://docs.microsoft.com/ja-jp/aspnet/core/fundamentals/localization?view=aspnetcore-3.1

このうち、まず[ビューのローカライズ](https://docs.microsoft.com/ja-jp/aspnet/core/fundamentals/localization?view=aspnetcore-3.1#view-localization)を使ってみる。ビューのローカライズで使うのはIViewLocalizerであり、ビューのファイル名と同じリソースファイルを見つけてローカライズする、という仕組み。

ローカライズの準備として、Startup.csを以下のように変更する必要がある。
ローカライズのフォルダはResoucesとする、ビューのローカライズをする、ローカライズは日本語と英語でデフォルトは日本語、クエリ文字列とクッキーでローカライズする、といった設定。

```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Localization;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace Localizer2
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddLocalization(options => options.ResourcesPath = "Resources");
            services.AddControllersWithViews().AddViewLocalization();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            var supportedCultures = new[] {
                System.Globalization.CultureInfo.GetCultureInfo("ja"),
                System.Globalization.CultureInfo.GetCultureInfo("en")
            };

            app.UseRequestLocalization(new RequestLocalizationOptions
            {
                DefaultRequestCulture = new RequestCulture(System.Globalization.CultureInfo.GetCultureInfo("ja")),
                SupportedCultures = supportedCultures,
                SupportedUICultures = supportedCultures,
                RequestCultureProviders = new List<IRequestCultureProvider>
                {
                    new QueryStringRequestCultureProvider(),
                    new CookieRequestCultureProvider()
                }
            });
            
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
}
```

Index.cshtmlを以下のようにする。

```html
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer
@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <p>@Localizer["textNotNeedEscaped"]</p>
</div>
```

IViewLocalizerはResourcesフォルダ内でビューと同じ位置にあるリソースファイルを見つけて使用するため、Resourcesフォルダを以下のような構造にする。

```bash
Resources
└── Views
    └── Home
        ├── Index.en.resx
        └── Index.ja.resx
```

各リソースファイルはVisual Studioなどで生成できるが、実態はただのXMLファイルなので適当に作成できる。とりあえずこんな感じで作っておく。

Index.ja.resx

```xml
<?xml version="1.0" encoding="utf-8"?>
<root>
  <data name="textNotNeedEscaped" xml:space="preserve">
    <value>エスケープ不要</value>
  </data>
</root>
```

Index.en.resx

```xml
<?xml version="1.0" encoding="utf-8"?>
<root>
  <data name="textNotNeedEscaped" xml:space="preserve">
    <value>This text does not need to be escaped.</value>
  </data>
</root>
```

画面を表示してみると、ちゃんとローカライズされていることがわかる。

日本語
![スクリーンショット 2020-08-15 21.09.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/4c453800-fbb8-f9e8-c7aa-6c77c5a9dd70.png)

英語
![スクリーンショット 2020-08-15 21.12.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/806b8ae6-c827-e001-403c-4b1d4d65c295.png)

次はエスケープが必要な文字列の確認。

```xml
<?xml version="1.0" encoding="utf-8"?>
<root>
  <data name="textNotNeedEscaped" xml:space="preserve">
    <value>エスケープ不要</value>
  </data>
  <data name="textNeedEscaped" xml:space="preserve">
    <value>&lt;script&gt;alert(&quot;alert&quot;);&lt;/script&gt;</value>
  </data>
</root>
```

```csharp
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer
@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <p>@Localizer["textNeedEscaped"]</p>
</div>
```

![スクリーンショット 2020-08-15 21.55.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/0f72fece-ed09-aa66-01ec-97e688d1599a.png)

おっと、普通にスクリプト実行されてしまった。IViewLocalizerはIHtmlLocalizerを継承しており、IHtmlLocalizerはHTMLタグを含んだ文字列をローカライズすることが前提になっているため、タグがタグのまま出てしまう。

ローカライズの説明にも

> ViewLocalizer は、IHtmlLocalizer を使用してローカライザーを実装するので、Razor は、ローカライズされた文字列を HTML エンコードしません。 IViewLocalizer は、パラメーターを HTML エンコードしますが、リソース文字列は HTML エンコードしません。

と書かれている。パラメータはHTMLエスケープされるけど、ローカライズテキスト自体にタグが入っている場合はエスケープされないということになる。

パラメータとして渡される部分はローカライズされることを確認してみる。パラメータを渡す場合のローカライズは以下のように、インデクサの第２引数以降にパラメータを書く形になる。

```xml
<?xml version="1.0" encoding="utf-8"?>
<root>
  <data name="textNotNeedEscaped" xml:space="preserve">
    <value>エスケープ不要</value>
  </data>
  <data name="textNeedEscaped" xml:space="preserve">
    <value>&lt;script&gt;alert(&quot;alert&quot;);&lt;/script&gt;</value>
  </data>
  <data name="yourNameIs" xml:space="preserve">
    <value>あなたの名前は{0}です。</value>
  </data>
</root>
```

```html
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer
@{
    ViewData["Title"] = "Home Page";
    var name = "山田太郎";
}

<div class="text-center">
    <p>@Localizer["yourNameIs", name]</p>
</div>
```

![スクリーンショット 2020-08-15 22.15.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/6b908dd6-499c-dfae-fa25-618239af3128.png)

ローカライズテキストにパラメータが入ったことが確認できた。次にパラメータがHTMLエスケープされるかを確認する。

```html
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer
@{
    ViewData["Title"] = "Home Page";
    var name = "<script>alert(\"alert\");</script>";
}

<div class="text-center">
    <p>@Localizer["yourNameIs", name]</p>
</div>
```

![スクリーンショット 2020-08-15 22.18.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/9195fe05-a5b1-17f4-559b-4e8bd31d82dd.png)

こちらはちゃんとエスケープされた。ということで基本的には問題なさそう。なぜならローカライズテキストは自分で用意しているものであってその中に危険な文字列はわざわざ入れないし、外部から入ってくるであろうパラメータはちゃんとHTMLエスケープされるから。この状況ではXSSは起きない。

# ローカライズのキーがパラメータとして渡される場合

問題になるケースとして、ローカライズのキー自身をパラメータとして渡す場合が考えられる。例えば以下のようにエラーコードに応じてエラーメッセージを表示する、という場合はありそう。

HomeController.cs

```csharp
using Microsoft.AspNetCore.Mvc;

namespace Localizer2.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index(string error)
        {
            return View("Index", error);
        }
    }
}
```

Index.cshtml

```html
@model string
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer
@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <p>@Localizer[Model]</p>
</div>
```

Index.ja.resx

```xml
<?xml version="1.0" encoding="utf-8"?>
<root>
  <data name="Err01" xml:space="preserve">
    <value>ログインしてください</value>
  </data>
</root>
```

http://localhost:5000?error=Err01 にアクセスすると、用意したエラーメッセージが表示される。

![スクリーンショット 2020-08-15 23.07.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/f88443e3-df3c-77ee-3c2b-7c985f5bf93d.png)

次にerrorパラメータにエスケープが必要な文字列を指定してみる。例えば、http://localhost:5000/?error=%3Cscript%3Ealert(%22alert%22)%3C/script%3E にアクセスする。

![スクリーンショット 2020-08-15 23.09.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/c3a9be69-d7ee-307b-5371-5e341a7aa373.png)

スクリプトが実行されてしまった。このようなURLをiframeの中に仕込まれたりしたらXSSが成立する。IViewLocalizerやIHtmlLocalizerはキーが存在しないとそのまま出力するので、外部から渡したパラメータをそのままローカライザに渡すとHTMLエスケープされずに出力してしまう。このような使い方はXSS対策的に避けるべきだろう。

これを避けるには、外部から指定するパラメータはローカライズのキーに渡さないのが確実だが、渡すような設計にする場合は正規のパラメータであるかを検証してから渡すようにする必要がある。

こんな感じ。

```csharp
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace Localizer2.Controllers
{
    public class HomeController : Controller
    {
        private readonly List<string> Errors = new List<string> { "Err01" };
        public IActionResult Index(string error)
        {
            if (!string.IsNullOrEmpty(error) && !Errors.Contains(error))
            {
                error = "";
            }

            return View("Index", error);
        }
    }
}
```

エラーコードとして想定していない文字列が指定された場合は空文字になるので、先ほどのようなXSSは起こらない。

![スクリーンショット 2020-08-15 23.21.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/1bc4ec66-5978-acec-c4b2-7410c2516566.png)

というかローカライザはキーが存在しなければ空白になるかエラーになるようにしてくれないだろうか。。キーをそのまま出すことが期待されているシチュエーションがあるんだろうか。英語の場合はそのままキーを使っている？

# SharedResourceを使う場合

ローカライズにはIViewLocalizerだけではなく、共通リソースファイルを用意してそれを利用する方法もあり、公式の資料にも記載されている。Resourcesフォルダにローカライズ用の共通リソースクラスを作り、同じ名前のリソースファイルを作ってDIを通して参照する。公式の資料ではSharedResourceクラスとなっているので同じ名前にするが、クラス名はなんでも良い。

```bash
Resources
├── SharedResource.cs
├── SharedResource.en.resx
└── SharedResource.ja.resx
```

SharedLocalizer.csはこんな感じで、中身は必要ない。

```csharp
namespace Localizer2.Resources
{
    public class SharedResource
    {
    }
}
```

リソースファイルの中身は先ほどと同じものとする。
ビューではこのローカライザをinjectして使う。まずはIHtmlLocalizerとして使ってみる。これはHTMLのタグをそのまま出力するもので、IViewLocalizerと同じ動作をするはず。

```html
@model string
@using Microsoft.AspNetCore.Mvc.Localization
@inject IHtmlLocalizer<Localizer2.Resources.SharedResource> Localizer;
@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <p>@Localizer[Model]</p>
</div>
```

さっきの対策として入れたコントローラのパラメータチェックは無くした状態で、まず想定されたエラーコードを使用する場合を見てみる。

![スクリーンショット 2020-08-16 0.35.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/e0d56eb4-3c2f-bd47-b4ea-6d875c89f8b8.png)

同じようにローカライズされた。次にXSS攻撃用のURLを渡してみる。

![スクリーンショット 2020-08-16 0.38.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/4344128b-c13e-5d45-dd0f-03477ff4b15b.png)

スクリプトが実行された。これは想定通り。

次にIStringLocalizerとして使ってみる。これは名前空間が`Microsoft.Extensions.Localization`であることからもわかるように、Webのみならず一般的に使用されるローカライザと思われる。(IHtmlLocalizerの名前空間は`Microsoft.AspNetCore.Mvc.Localization`であり、Webのために使う感がある)

```html
@model string
@using Microsoft.Extensions.Localization
@inject IStringLocalizer<Localizer2.Resources.SharedResource> Localizer;
@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <p>@Localizer[Model]</p>
</div>
```

通常のアクセスと攻撃用のアクセスを実行してみると、それぞれ以下のような結果になった。

![スクリーンショット 2020-08-16 0.51.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/578ef5d7-e194-57ef-5fc6-a5568df94b02.png)
![スクリーンショット 2020-08-16 0.50.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542185/c2efb115-0018-506f-cef7-37c3ccd25f7c.png)

両方問題なく表示された。IStringLocalizer自体はHTMLエスケープを想定したものではないが、ローカライズされた後のテキストがRazorに渡され、Razorの機能によってHTMLエスケープされるためだと考えられる。どちらかというと、Razor的にはHTMLエスケープしないIHtmlLocalizerの方が特殊なんだろう。

ローカライズは主にテキストの多言語対応のためなので、XSSの危険性を増やしてまでタグに対応する必要はないと思うんだが。実際ローカライズされた後のテキストにHTMLのタグを含めたい、って用途はどれくらいあるんだろうか。あんまりないような。。

公式の資料でビューのローカライズはIViewLocalizerとIHtmlLocalizerで説明されているためそっちを使ってしまいがちだが、特にタグを含めたテキストを使わないのであればIStringLocalizerを使った方が安全でいいような気はする。

# まとめ

ASP.NETとRazorは大体においてエスケープしてくれて安全性が高いが例外はある。
意識して使っている分には良いが、意識せずに使っていると危険。
外部からのパラメータをHTML出力する場合は気をつけよう。