質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1293閲覧

Javascriptでスタイルシートを変更するのは、危険なコードになりますか?

Takonakinji

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/02/09 23:48

下記のコードはセキュリティ上の問題がありますか?もしあるなら、改善策はありますか?
(formタグを使用しているのは、サーバー側で違う内容の処理をさせたいので使用しています。質問の内容に関係無いと思うので省略しました。)

<!DOCTYPE html> <html> <head> (中略) <link rel= "stylesheet" href= "/css/default.css" type= "text/css" id= "link"/> <head> <body> <form action= "" method= "post" name= "myform"> <input type= "radio" name="radio" value= "0" checked />DEFAULT <input type= "radio" name="radio" value= "1" />CUSTOM </form> (中略) </body> <script> var myform = document.myform; myform.addEventListener('change',function(e){ var value = e.target.value; var link = document.getElementById('link'); if(value == 0)link.href= "/css/default.css"; else if(value == 1)link.href= "/css/custom.css"; else alert('error'); }); </script> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/02/09 23:55

コードはマークダウンのcode機能を利用してご提示ください。 あと懸念されている「セキュリティ問題」は何でしょうか。 「とりあえず見てくれ」だとアドバイスを得るのは難しいと思います。 まず自身で調べてください。 IPAのサイトにガイドラインもあります。
hoshi-takanori

2020/02/10 00:24

CSSで見た目を切り替えるだけで、切り替え先のCSSも自分で管理できているならセキュリティ上の問題はないと思います。 蛇足ですが、scriptタグをbodyの後ろに書くのは確かHTMLの規格に反するので、bodyの中に書いたほうがいいでしょう。(このままでもほとんどのブラウザで動くとは思いますが。)
thyda.eiqau

2020/02/10 01:39

質問への追記・修正依頼ではありませんが、言語のルールを守ることは非常に重要なことなので、hoshi-takanoriさんのコメントを補足します。 html 要素の中に置いていいコンテンツは 1つの head 要素と、それに続く1つの body 要素と定められています。script 要素はメタデータコンテンツですが、 html 要素 は内容にメタデータコンテンツを許容しません。 source: https://html.spec.whatwg.org/multipage/semantics.html#the-html-element
guest

回答2

0

この件が一般的にはべつに危険なことはないと思いますが
すべての処理はセキュリティの問題を含む可能性がありますので
絶対に安心なものはありません。

投稿2020/02/10 00:26

yambejp

総合スコア114843

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

セキュリティ上の問題がありますか?

読み込む CSS 関連ファイル(背景画像、フォントなどのアセットを含む)が全て同一オリジンにある場合に限っては完全な管理下にあるので、デッドリンク以外のリスクは無いと言えます。

ただ、同一オリジンのアセットでも「スタイルシートを動的に切り替える処理」は、CSSの読み直しが発生したり、動的な更新前の表示に影響を与えてデザイン崩れが生じやすい手法でもありますので、そういうネガティブな要因が、ある意味でリスクと言えそうです。

改善策はありますか?

関数やオブジェクトを用意し、十分に動作確認した上で使う のが良いと思います。

DOM の APIを直接操作するコードを埋め込むよりも

  1. (例えばCSSのURL指定するだけで)安定した結果を得られやすい。
  2. 運用停止の際にコードの修正箇所を1箇所に抑えられる。

蛇足ですが、ご質問のような link[rel=stylesheet] の href を書き換える手法は、CSS2 時代に個人でウェブサイト公開される方が行っていた手法です(チームでデザインする場面では使いづらいかもしれません)。

ブラウザ実装としては CSSOM に基づいて JavaScript から制御できる実装(MDN CSSStyleSheet)になっていますので、動的に操作する手法も否定されるものではないと感じます。

投稿2020/02/10 03:09

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問