【HTML】ローカルHTMLファイルのsvg画像をブラウザで表示させる方法

HTML

はじめに

最近アイコンなどでsvgファイルが使われているのをよく見ます。

PCでローカルHTMLファイル上のsvg画像の表示確認がしたい場合、以下の方法でブラウザ上でsvg画像を表示することができます。

この方法はcross-originでアクセスする方法と同じです。

Chromeで表示する方法

  1. 開いているChromeを全て閉じる
  2. Windowsボタン+Rで「ファイル名を指定して実行」を表示
  3. 「名前(O):」へ以下を入力し「OK」を押下
"C:\Program Files\Google\Chrome\Application\chrome.exe" -allow-file-access-from-files

「”C:\Program File。。。」の部分はインストールフォルダへ変更してください。

  1. 開いたChromeへhtmlファイルをドラッグ&ドロップ

Chromeだと、一旦開いているChromeを全て閉じる必要があります。。

が、Edgeだと閉じなくてもできます。

Edgeで表示する方法

  1. Windowsボタン+Rで「ファイル名を指定して実行」を表示
  2. 「名前(O):」へ以下を入力し「OK」を押下
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --disable-web-security --user-data-dir="C://Chrome dev session"

「”C:\Program File。。。」の部分はインストールフォルダへ変更してください。

  1. 開いたEdgeへhtmlファイルをドラッグ&ドロップ
左が本設定なしのEdge、右が本設定をして開いたEdge

Edgeだと今まで見ていたページを閉じることなく新たに起動したEdgeで表示が出来ます。

便利!

Cross-Origin(クロスオリジン)アクセスの危険性

今回はCross-Originエラーとならないようにブラウザを設定しましたが、ローカルで信頼のおけるHTMLを開くときだけにしてください。
Cross-Origin(クロスオリジン)アクセスの危険性は、主にウェブセキュリティに関連しており、クロスオリジンのリソースへのアクセスが適切に管理されない場合に発生します。
以下は、クロスオリジンアクセスに関連する危険性の一部です。

  1. クロスサイトリクエストフォージェリ (CSRF):
    • クロスサイトリクエストフォージェリ(Cross-Site Request Forgery、CSRF)攻撃では、攻撃者がユーザーの認証済みセッションを悪用して、ユーザーが意図しないアクションを実行させることが可能です。これにより、攻撃者はユーザーの代わりにウェブサイト上で操作を実行できます。CSRF攻撃は、クロスオリジンからのリクエストを悪用することで行われることがあります。
  2. クロスサイトスクリプティング (XSS):
    • クロスサイトスクリプティング(Cross-Site Scripting、XSS)攻撃では、攻撃者がウェブサイトに不正なスクリプトを挿入し、ユーザーのブラウザで実行させることができます。XSS攻撃を通じて、攻撃者はクロスオリジンのデータにアクセスし、ユーザー情報を盗む可能性があります。
  3. クロスオリジンリクエストの悪用:
    • クロスオリジンのリクエストを悪用する攻撃では、攻撃者は他のオリジンに存在するリソースにアクセスし、悪意のある操作を行うことができます。これにより、セキュリティ上の問題や機密情報の漏洩が発生する可能性があります。
  4. 不正なデータ操作:
    • クロスオリジンアクセスが適切に制御されていない場合、他のオリジンのデータに対して不正な操作が行われる可能性があります。これは、データの改ざんや破壊を引き起こす可能性があります。
  5. クロスサイトフレーミング (Clickjacking):
    • クロスサイトフレーミング(Clickjacking)攻撃では、攻撃者はユーザーをだますために不透明なフレームを使用し、ユーザーが意図しないアクションを実行させることがあります。これにより、クロスオリジンのリソースが表示され、ユーザーの操作を悪用できる可能性があります。

これらの危険性を軽減するために、Cross-Originアクセスは適切に管理および制御されるべきです。本来はCross-Originリクエストを許可する際には、セキュリティヘッダーを設定し、アクセス許可を制御するための適切な手法を実装することが重要です。また、セキュリティ意識を高め、セキュリティベストプラクティスを実践することが重要です。

とは言え、ロカールで上記のようなテストを行う際にはエラーを解除しても問題ないですね。

コメント

タイトルとURLをコピーしました