つばろぐ

主に C#, .NET, Azure の備忘録です。たまに日記。

CDNを参照するlinkタグやscriptタグに必要な属性について調べた

CSS JavaScript

ASP.NET Coreのプロジェクトを作った状態の Views/Shared/_Layout.cshtml の、CSSやJavaScriptを読み込んでいる記述は以下のようになっています。（抜粋）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
        asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
        asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
        crossorigin="anonymous"
        integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
        asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
        asp-fallback-test="window.jQuery"
        crossorigin="anonymous"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
        asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
        asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
        crossorigin="anonymous"
        integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
</script>

CDN経由でファイルを取得するようになっていますが、タグに crossorigin や integrity という見慣れない属性があり、気になったので調べてみました。

crossorigin属性

crossorigin 属性: コンテンツへの CORS アクセスの要求 | MDNからの引用です。

developer.mozilla.org

HTML5 では、 CORS への対応が <img>, <video>, <script> など一部の HTML 要素で行われ、 crossorigin 属性 (crossOrigin プロパティ) で、要素が取得するデータに関する CORS リクエストを構成することができます。

crossorigin="anonymous"のときのリクエストヘッダー

GET /css/site.css HTTP/1.1
Host: localhost:5001
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept: text/css,*/*;q=0.1
Accept-Language: ja
Accept-Encoding: gzip, deflate, br
Referer: https://localhost:5001/
DNT: 1
Connection: keep-alive
Cookie: .AspNet.Consent=yes
Pragma: no-cache
Cache-Control: no-cache

crossorigin="use-credentials"のときのリクエストヘッダー

GET /ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css HTTP/1.1
Host: cdnjs.cloudflare.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept: text/css,*/*;q=0.1
Accept-Language: ja
Accept-Encoding: gzip, deflate, br
Referer: https://localhost:5001/
Origin: https://localhost:5001
DNT: 1
Connection: keep-alive
Cookie: __cfduid=d0c0f4f210dea6cf067de9ca255f7b4041540889478
Pragma: no-cache
Cache-Control: no-cache

違いは？

crossorigin="use-credentials"とすると、Originが明示されCookieにセッション情報を含めて送るようになるようです。

integrity属性

サブリソース完全性 | MDNからの引用です。

developer.mozilla.org

サブリソース完全性 (SRI) は、 (CDN などから) 取得したリソースが意図せず改ざんされていないかをブラウザーが検証するセキュリティ機能です。 SRI を利用する際には、取得したリソースのハッシュ値と一致すべきハッシュ値を指定します。

ファイルが改ざんされていないことを検証するための属性のようです。CDN経由でファイルを使用する際はちゃんとこの属性をつけたほうが良さそうですね。

ではこのハッシュ値はどう作る？というところですが、opensslやshasumといったコマンドでも作れますが、このサイトを使うと簡単です。対象のファイルURLを指定するとハッシュ値を生成してくれます。

SRI Hash Generator

f:id:tech-tsubaki:20181230214625p:plain
ハッシュ値を生成する

Azure Storage Emulator 5.8.0.0でAzure Durable Functionsが実行できない問題を解消する方法

Azure Functions

Azure Durable Functionsのアプリケーションをローカルで開発する場合、Azure Storage Emulatorを使うことを推奨されています。

docs.microsoft.com

docs.microsoft.com

エラーが起きた

しかし、2018/11/18時点で最新のAzure Storage Emulator 5.8.0.0では、Azure Durable Functionsの実行時（デバッグ含む）に下記のようなエラーが起きます。

Azure Functions Core Tools (2.2.32 Commit hash: c5476ae629a0a438d6850e58eae1f5203c896cd6)
Function Runtime Version: 2.0.12165.0
[2018/11/17 6:32:07] Building host: startup suppressed:False, configuration suppressed: False
[2018/11/17 6:32:07] Reading host configuration file 'D:\src\yuta\func\durable-functions-anti-pattarns\durable-functions-anti-pattarns\bin\Debug\netcoreapp2.1\host.json'
[2018/11/17 6:32:07] Host configuration file read:
[2018/11/17 6:32:07] {
[2018/11/17 6:32:07]   "version": "2.0"
[2018/11/17 6:32:07] }
[2018/11/17 6:32:34] A host error has occurred
[2018/11/17 6:32:34] Microsoft.WindowsAzure.Storage: Server encountered an internal error. Please try again after some time.

本来なら関数が読み込まれ実行エンドポイントが用意されるわけですが、「Microsoft.WindowsAzure.Storage: Server encountered an internal error. Please try again after some time.」となり、止まってしまいます。

原因

この問題に関して、すでにIssueが上がっています。

github.com

I think this might possibly be a problem with extensions that use web hooks.

Issueにはこのように記載されており、Webhook、つまりHTTPトリガーの関数で起きるだろうとのこと。
実際、私の環境でもHTTPトリガーの関数の実行時にエラーが発生しました。

対策

IssueはOpen状態のため根本解決には至ってないと思いますが、暫定的な対策が提示されています。
local.settings.jsonというローカル開発時の設定ファイルに "AzureWebJobsSecretStorageType": "files" を追記するようです。

初期状態のlocal.settings.jsonに追記した状態は下記になります。

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
    "FUNCTIONS_WORKER_RUNTIME": "dotnet",
    "AzureWebJobsSecretStorageType": "files"
  }
}

Fukuoka.NET Conf 2018を開催しました

勉強会 C#

f:id:tech-tsubaki:20181008164444j:plain

すでに開催から1週間以上経ってしまった。。

今年も Fukuoka.NET Conf を開催しました。
遅くなりましたが、参加者、登壇者、スポンサー、特にスタッフの皆さん、ありがとうございました。とても盛り上がったイベントになり、とても嬉しく思います。

fukuten.connpass.com

2017年にも開催しましたが、このイベントは「.NET Conf」というグローバルバーチャルカンファレンスのローカルイベントです。大元のイベントはこちら。セッションは動画で公開されています。

www.dotnetconf.net

昨年はセッションとハンズオンを行いましたが、今年は少しチャレンジして2トラックで開催しました。

メイン会場ではユーザー事例トラックと題して、福岡でMicrosoftテクノロジーを使って事業を推進している企業の方々に登壇してもらいました。
サブ会場ではDeepDiveトラックと題して、最大15名限定の特濃セッションをしてもらいました。
鹿児島の方にもイベントに興味をもっていただきLTに参加してもらいました。

昨年よりも規模を大きくでき、参加者数も増え、今後も福岡の .NET の盛り上がりに貢献したいなと感じました。

当日の雰囲気が気になる方はこちらをご覧ください。

togetter.com