JavaScriptの3点セットを用い、ブラウザでwebサイトを表示させる際に最低限考慮しておきたいセキュリティを、特にフロントエンドから堅牢化できるものに特化してざっくりと振り返ります。Code」拡張機能にも)、もっぱら本番環境をメインに考えるものとします。フロントエンドのセキュリティの必要性webセキュリティはその多くがフロントエンドというよりはバックエンド(サーバーサイド)またはインフラストラクチャに深く関係します。フロントエンドエンジニアはセキュリティを考えなくていいわけではありません。静的なHTMLサイトであってもクロスサイトスクリプティング(XSS)など攻撃を仕掛けられる潜在的な脆弱性があります。した攻撃の概要を理解しHTML(とJavaScript)の記述を工夫することでフロントエンドを堅牢化することができます。SlideShareXSSXSSとはwebページ上で意図せず任意のスクリプトが実行されてしまう脆弱性です。ユーザーが入力したデータの適切なエスケープ処理を忘れたりすることが脆弱性となり得ます。&)を利用する攻撃なので、これらをHTMLエンティティ文字(&lt;、&gt;、&amp;など)に置換することで防げる。この処理をサニタイジングまたはエスケープと呼ぶ。blogオリジンの確認フロントエンドのセキュリティの中でも重要な概念がオリジン(origin)の確認です。ポート...によって定義されます。スキーム、ホスト、ポートがすべて一致した場合のみ、二つのオブジェクトは同じオリジンであると言えます。使用して緩和することができます。用語集よりスキームホストポートの3つの組み合わせがオリジンです。オリジン間保護の仕組み下記の5つが主要なオリジン保護の仕組みです。Sharring)は、他のオリジンからリソースを取得して良いかの許可のこと。CORSを指定することで、CDNなど、クロスオリジンなリソースをセキュアに利用できます。JavaScript、CSS、webフォントなど)に使用できる属性。リクエストの構成を有効にします。取得したリソースが意図せず改ざんされていないかをブラウザーが検証するセキュリティ機能です。script要素やlink要素のintegrity属性に指定することによって使用します。party利用が制限されることとなりました。従来と同じ挙動とするにはSameSite属性をNoneに指定し、さらにSecure属性の指定が必要です。HacksTabnabbing対策a要素とtarget="_blank"属性を使って他サイトのページにリンクを貼ると、自サイトがパフォーマンスやセキュリティのリスクにさらされる可能性があります。これは「別のウィンドウから開かれたウィンドウは、主ウィンドウへの参照を保持する」というwindow.openerプロパティの仕様のためです。newURLというコードを書いておくと、遷移先のページに移動した瞬間に主ページ(遷移前のページ)のURLが自動的にnewURLへリダイレクトされてしまいます。この手法はTabnabbingと呼ばれフィッシング詐欺に利用されることもあります。対策これを防ぐ簡単な方法として、下記のようにtarget="_blank"属性のあるa要素に対してrel="noopener"属性を合わせて書いておくと良い。属性のあるa要素は、デフォルトでrel="noopener"と同じ挙動になりました。2022年1月現在はまだrel="noopener"属性はレガシーブラウザ対応として引き続き記述しておくと良いようです。web.devとはいえ2022年6月に予定されるIE11サポート終了でこのあたりも不要になるかもしれませんね。フロントエンドセキュリティのチェック方法webhintMicrosoft製の品質チェック/監査ツールwebhintはフロントエンドのセキュリティを簡単にチェックできるツールです。Toolsを利用する監査ツールで、Lighthouseを利用したことがある人なら簡単に使いこなせると思います。webhintはアクセシビリティやパフォーマンスやベストプラクティスやPWA対応といった監査項目こそLighthouseと共通していますが、Pitfall(HTMLのエラーチェック)とSecurityというwebhint独自の監査項目があります。これが本当に強力で、Securityの指摘を参考にすればCORSに関する脆弱性などの確認・修正が簡単にできます。MozillaにURLを入れスキャンさせるとレスポンスヘッダーのセキュリティ監査ができます。(CSP)などmetaタグを使ってフロント側からも制御できる項目もあります。個々のセキュリティ項目をフロント/バックエンドのどちら側から制御するのか決めておくと良いでしょう。所感webセキュリティはその多くがサーバサイドとインフラストラクチャに深く関わるものではありますが、フロントエンドエンジニアも最低限のセキュリティ知識を持っておく必要があるでしょう。Cookieの仕様変更など突然の大きな変化があった際にもスムースに対応ができるようになるのではないかと思います。webhintなどの便利なツールを利用して、セキュリティ観点での品質管理を効率的に業務に取り込んでいきたいですね。デザイン事業部が書いた記事twitterfacebookはてなブックマークpocketお客様のご要望に柔軟に対応いたします。お気軽にご相談ください。cloudpackは、アイレット株式会社が提供するクラウド支援サービスです。問い合わせまでトータルサポート!お問い合わせはこちらアイレットでは、様々な職種で一緒に働ける仲間を募集しています。インフラエンジニア、開発エンジニア、クリエイティブ職、営業職など、様々な職種で一緒に働ける仲間を募集しています。アイレット公式サイト採用情報をご覧ください。プライバシーポリシークラウド導入のご相談、お見積り、サービスについてのご質問などお気軽にお問い合わせください。