いきなりですが問題です．以下の画像をご覧ください．
ブラウザでアクセスすることも可能です．https://www.asahi.com/edu/student/teacher/TKY201101160133.htmlです．Chrome，Firefox，Edgeで，同じような表示になります．
2011年1月17日付けの，朝日新聞の記事なのですが，表示が不自然です．セキュリティの観点で，2011年の記事初出時から現在までの間に，何が起こったかを説明してください．
今週水曜日の授業開始前の小テスト問題でした．
さっそくですが解答です．
「一言でいうと，『CSSが適用されなくなった』のでした．
CSS（カスケーディング・スタイル・シート）は，Webページ，より正確にはHTML文書などの，『見せ方』を指示するものです．HTMLファイルと別にCSSファイルを作っておき，HTML文書内で適切にリンクすることで，ページに適用されます．
記事ページで右クリックして『ページのソースを表示』を選び，どのようにリンクしているかを，見てみましょう」
「11行目です．『<link rel="stylesheet" type="text/css"』で始まっており，CSSの適用になります．CSSファイルの所在は，href=のあとの，http://www.asahicom.jp/css08/common/common.cssのURLです．
このURLをコピーして，ブラウザのアドレスバーに貼り付けてアクセスを試みると，プログラムコードのようなものが表示されます．これがスタイルシートです．@importを並べて，他のCSSファイルを読み出しています．リンク切れでないこともわかりました．
問題に掲げた記事ページでは，このhttpからはじまってcommon.cssで終わるURLに，アクセスしなかった…ファイルを取得しなかったのでした．
そのことを確認するには，記事ページに戻って，デベロッパーツールを表示させます．開発者ツールまたはDevToolsとも言います．Chrome，Firefox，Edgeのいずれでも，Ctrl+Shift+I，またはF1からF12まで並んでいるうちのF12のキーを押すことで，ブラウザの右に詳細情報が表示されます．Console（コンソール）を見つけてクリックし，先頭から表示させると，エラーメッセージが見つかります」
「TKY201101160133.htmlの11行目の，エラーです．このページはHTTPSでロードされたのだけれど，11行目のスタイルシートのURLはhttp://で始まっており，非HTTPSです．そういうのはロードせず，このリクエストはブロックします．ちゃんと読み出したかったら，HTTPSにしてください…という内容です．このブロックは，セキュリティ対策として，ブラウザのほうで行っています．
httpsのページ上で，httpsでないコンテンツ，CSSのほかJS（JavaScript）のファイルなどにも，アクセスしようとすると，このエラーになります．
エラーを回避する方法として，記事ページのURLをhttpsではなくhttpにするか，リンク先をhttpsにするのが，思いつきます．
なのですが，記事ページをhttpにするのは，失敗します．記事ページのURLを編集してみましょう．「s」を取り除いて，URLをhttp://www.asahi.com/edu/student/teacher/TKY201101160133.htmlにしてから，Enterキーを押しても，同じ表示になります．DevToolsのコンソールでのエラーは再び表示されますし，アドレスバーの左には南京錠のアイコンがあり，httpsになっているのがわかります．
これはasahi.comのサーバのほうで『リダイレクション』をしているためです．http://asahi.comなになにへのアクセスがあったら，https://asahi.comなになににアクセスしてもらうように，しているのです．『https化』と言ってもいいでしょう．
しかしこのリダイレクション先の記事ページにおいて，HTMLの中身は，https化への配慮がきちんとなされていません．先に述べたとおりの理由で，エラーになります．
リンク先をhttpsにするのを，試してみましょう．DevToolsで，Console（コンソール）をElements（要素）に変更して，編集を試みます．11行目…と言いたいのですが，行番号は出ません．少し操作をして，『<link rel="stylesheet" type="text/css"』で始まる箇所を表示させ，httpの後ろにsを付けて，編集から離れると…」
「はい，このように，朝日新聞DIGITALの，記事の表示になってくれました」
補足です．この件を，「Same-Origin Policy（SOP）に基づき，common.cssにアクセスできなかった」とするのは間違いです．例えば同一オリジンポリシー - ウェブセキュリティ | MDNに書かれているとおり，「CSSを<link rel="stylesheet" href="...">で使用する場合」には，「異なるオリジンに埋め込むことができる」のです．
授業開始前の小テスト問題にいいかもと思ったのは，授業前日の就寝前，そして昨年度の同じ回の小テスト問題を捨てて，これを出題しようと決めたのは，授業当日の起床直後でした．授業は第11回，テーマは「OSとWebのセキュリティ」で，SOPやCross-Origin Resource Sharing (CORS)についても，昨年度に作成したスライドを手直しして，解説する予定でした．
問題のスクリーン表示のためのスライドは，出勤前に作りました．解答・解説のスライド作成中に，SOPではなく，HTTPSからHTTPへのアクセスが原因であることに気づき，編集が完了したのは，授業の15分ほど前でした．
