window.pipedriveLeadboosterConfig={です。 ベース:'leadbooster-chat.pipedrive.com'、 companyId:11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2、 } ;(function () { var w = window もし (w.LeadBooster) {なら console.warn('LeadBooster already exists') } else { w.LeadBooster = { {. q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: 関数 (n) { { this.q.push({ t: 'o', n: n, h: h }) this.q.push({ t: 't', n: n }) }, } } })() 一般的なJavascriptライブラリのXSSセキュリティ。それでも心配すべき?- The Codest
The Codest
  • 会社概要
  • サービス
    • ソフトウェア開発
      • フロントエンド開発
      • バックエンド開発
    • Staff Augmentation
      • フロントエンド開発者
      • バックエンド開発者
      • データエンジニア
      • クラウドエンジニア
      • QAエンジニア
      • その他
    • アドバイザリー
      • 監査&コンサルティング
  • 産業
    • フィンテック&バンキング
    • E-commerce
    • アドテック
    • ヘルステック
    • 製造業
    • 物流
    • 自動車
    • アイオーティー
  • 価値
    • CEO
    • CTO
    • デリバリー・マネージャー
  • チーム
  • Case Studies
  • ノウハウ
    • ブログ
    • ミートアップ
    • ウェビナー
    • リソース
採用情報 連絡先
  • 会社概要
  • サービス
    • ソフトウェア開発
      • フロントエンド開発
      • バックエンド開発
    • Staff Augmentation
      • フロントエンド開発者
      • バックエンド開発者
      • データエンジニア
      • クラウドエンジニア
      • QAエンジニア
      • その他
    • アドバイザリー
      • 監査&コンサルティング
  • 価値
    • CEO
    • CTO
    • デリバリー・マネージャー
  • チーム
  • Case Studies
  • ノウハウ
    • ブログ
    • ミートアップ
    • ウェビナー
    • リソース
採用情報 連絡先
戻る矢印 戻る
2019-08-26
ソフトウェア開発

一般的なJavascriptライブラリのXSSセキュリティ。それでも心配すべき?

ダニエル・グレック

最もポピュラーなJavascriptライブラリに関しては、開発の歴史(Angularは9年、Reactは6年、Vueは5年)の中で、セキュリティ、特にXSS攻撃に対する脆弱性に関して、良いことがたくさんあったことを認めなければなりません。しかし、この記事では、開発者がまだ注意すべき小さな罠と原則について議論します。

エックスエスエス

私たちは、言語ではなくフレームワークの時代に生きている。このことは、プログラマーがセキュリティを含む開発の多くの側面について心配する必要がなくなることを意味している。現在のバックエンド・フレームワークの大半は、セキュリティ・モジュールを実装しており、外部の専門企業や大規模な学会によってテストされている。したがって セキュリティ意識の低下 例えば、若いプログラマーは、特にフリーランスという点で、製品に対してより大きな責任を負っている。

アプリケーションのクライアント側に対する一般的な攻撃の一つに XSS(クロスサイト・スクリプティング)があります。これは、実行可能なクライアント側スクリプトをウェブ・アプリケーションに注入することで実行され [1]、実装された HTML レンダリング手法や ジャバスクリプト コード を実行するエバリュエータです。XSS は、セッション・クッキーやユーザ・データを含む様々なデータが収集される可能性があるため、比較的有利であり、キーロガーのような追跡アプリケーションをインストールすることができるため、ユーザとビジネス・オーナーの両方にとって危険です。時には、ページ上でXSSを許すために、次のような他の攻撃形態が実行されることもあります。 SQLインジェクション.

例

ページのログインフォームが、GETリクエスト内で送信されたloginNameパラメータをログイン名入力にレンダリングします。この値は、サーバ側でもアプリケーションのクライアント側でも処理されません。リクエストによって http://localhost:8080/login?name=<script>alert(document.cookies)</script>
コードが実行され、データが公開される

これはその一例である。 反射型XSS攻撃特別に用意されたURLアドレスを通じてスクリプトが注入され、サーバーのレスポンスに反映される。その他のよく知られた攻撃は以下の通り:

  • 保存されたXSS 注入されたデータは、通常はアプリケーションで利用可能なフォームによって、サーバーサイドに保存されます。クライアントアプリケーションは、例えばデータベースに格納されているコードをレンダリングします。
  • DOM XSS は、サーバー・サイドを使用せずにXSS攻撃を行います。記事の後半では、この攻撃形態に焦点を当てます。

ReactおよびVueライブラリにおける現在の脆弱性

現在のReact/Vueバージョンでは、2つの大きな問題が検出されましたが、まだ公式には修正されていません。最初の脆弱性は、どのフレームワークでも同じ性質を持っており、テンプレート内で生のHTMLレンダリングを可能にするメソッドに関連しています: ブイエイチティー そして dangerouslySetInnerHTML、 に対して、それぞれ Vue およびReactを参照してください。各ドキュメント[2]は、賢明でない使い方はユーザーをXSS攻撃 にさらす可能性があることを読者に知らせている。問題を解決するための他の選択肢がない場合は、データが次のようなものであることを確認してください。 濾過 そして エスケープ.危険ではあるが、これらの方法が修正されることを期待すべきではない。自己責任で使用してください。

2018年第1四半期、Reactでタグ要素のプロパティを設定することでコードを直接実行できる大きなバグが検出された。のような属性内でコード例を渡すと、そのコードを実行することができます。 javascript:alert(1) レンダリングされたリンクを実行すると、コードが実行されます。この問題[4]はまだ未解決で、修正プログラムも準備されていません。公式ディスカッションで提案されている例は、この問題を克服するいくつかの方法を示唆しています。

最新バージョンへのアップデートが不可能な場合は、コードが公開されないようにすることで、古い問題が問題を引き起こさないようにしてください:

  • 子供 ノード インジェクション - React, 使用方法 React.createElement [5]
  • サーバー側レンダリング - React/Vue [6]
  • CSSインジェクション [8]

それはまだJavascriptについてである。フロントエンドについて

フレームワークやライブラリそのものだけでなく、言語としてのJavascriptにも危険な機能があることを忘れないでください。それらは一般的にDOM操作やスクリプトの実行に関連しています。 eval() はこの種のフラグシップ関数を表しており、与えられた文字列化されたコードを直接実行するため、非常に危険である [9]。また、これらの関数を見つけたら、自分のコードをよく見てください:

  • ドキュメント書き込み
  • document.writeln
  • (要素).innerHTML
  • (要素).outerHTML
  • (要素).insertAdjacentHTML

ここで、適切なルールが設定されたリンターを使うことは、そのような脆弱な箇所を発見するのに役立つかもしれない。また、開発されたコードのセキュリティ・ギャップを検出するのに役立つオープンな、あるいは、商用のコード・アナライザもたくさんあります。

どのライブラリ/フレームワークを選んだとしても、フロントエンド開発に関する基本原則を忘れてはならない。まず、注入する外部コードが信頼できるソースから来たものであることを常に確認してください。 監査 依存関係を賢く選びましょう。依存関係の中には、深刻な脆弱性を含んでいるものがあり、コードそのものには問題がなくても、あなたのコードを危険にさらす可能性があります。依存関係のセキュリティについては、こちらをご覧ください:

https://thecodest.co/blog/security-in-javascript-packages/

では...まだ心配する必要があるのか?

そして、セキュリティに関して、外部ライブラリや自分自身を決して信用しないよう、皆さんに強くお勧めします。あなたのソフトウェアがどんなに安全であると期待しても、一般的な攻撃形態 [10] を可能な限りテストする努力を常にしてください。

  1. https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
  2. https://vuejs.org/v2/guide/syntax.html#Raw-HTML
  3. https://github.com/facebook/react/issues/12441
  4. http://danlec.com/blog/xss-via-a-spoofed-react-element
  5. https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0
  6. https://github.com/dotboris/vuejs-serverside-template-xss
  7. https://frontarm.com/james-k-nelson/how-can-i-use-css-in-js-securely/
  8. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Do_not_ever_use_eval!

続きを読む

PHPでプロジェクトを維持する際に避けるべき5つの間違い

PHPの開発symfony コンソールコンポーネント - ヒントとコツ

なぜsymfonyのPolyfillが必要なのか(...そしてなぜ必要ではないのか)

関連記事

ソフトウェア開発

将来を見据えたウェブ・アプリケーションの構築:The Codestのエキスパート・チームによる洞察

The Codestが、最先端技術を駆使してスケーラブルでインタラクティブなウェブアプリケーションを作成し、あらゆるプラットフォームでシームレスなユーザー体験を提供することにどのように秀でているかをご覧ください。The Codestの専門知識がどのようにデジタルトランスフォーメーションとビジネス...

ザ・コデスト
ソフトウェア開発

ラトビアを拠点とするソフトウェア開発企業トップ10社

ラトビアのトップソフトウェア開発企業とその革新的なソリューションについて、最新記事でご紹介します。ラトビアの技術リーダーたちがあなたのビジネスをどのように向上させるかをご覧ください。

thecodest
エンタープライズ&スケールアップ・ソリューション

Javaソフトウェア開発の要点:アウトソーシングを成功させるためのガイド

outsourcingのJavaソフトウェア開発を成功させるために不可欠なこのガイドを読んで、The Codestで効率性を高め、専門知識にアクセスし、プロジェクトを成功に導きましょう。

thecodest
ソフトウェア開発

ポーランドにおけるアウトソーシングの究極ガイド

ポーランドのoutsourcingの急増は、経済、教育、技術の進歩がITの成長とビジネス・フレンドリーな環境を促進していることによる。

ザ・コデスト
エンタープライズ&スケールアップ・ソリューション

IT監査ツール&テクニック完全ガイド

IT監査は、安全かつ効率的で、コンプライアンスに準拠したシステムを保証します。その重要性については、記事全文をお読みください。

The Codest
ヤクブ・ヤクボヴィッチ CTO & 共同創設者

ナレッジベースを購読して、IT部門の専門知識を常に最新の状態に保ちましょう。

    会社概要

    The Codest - ポーランドに技術拠点を持つ国際的なソフトウェア開発会社。

    イギリス - 本社

    • オフィス 303B, 182-184 High Street North E6 2JA
      イギリス、ロンドン

    ポーランド - ローカル・テック・ハブ

    • ファブリチュナ・オフィスパーク、アレハ
      ポコジュ18、31-564クラクフ
    • ブレイン・エンバシー, コンストルクトースカ
      11, 02-673 Warsaw, Poland

      The Codest

    • ホーム
    • 会社概要
    • サービス
    • Case Studies
    • ノウハウ
    • 採用情報
    • 辞書

      サービス

    • アドバイザリー
    • ソフトウェア開発
    • バックエンド開発
    • フロントエンド開発
    • Staff Augmentation
    • バックエンド開発者
    • クラウドエンジニア
    • データエンジニア
    • その他
    • QAエンジニア

      リソース

    • 外部ソフトウェア開発パートナーとの協力に関する事実と神話
    • 米国から欧州へ:アメリカの新興企業がヨーロッパへの移転を決断する理由
    • テックオフショア開発ハブの比較:テックオフショア ヨーロッパ(ポーランド)、ASEAN(フィリピン)、ユーラシア(トルコ)
    • CTOとCIOの課題は?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • ウェブサイト利用規約

    著作権 © 2025 by The Codest。無断複写・転載を禁じます。

    jaJapanese
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek jaJapanese