しゅーと (@shutingrz)
しゅーと (@shutingrz)
Security researcher
May 8, 2019 4 min read

記事に特定のタグがあったら「悪用禁止」と表示されるようにしてみた

要はGDPR対応用のライブラリを「悪用禁止」の意思表示に使うってだけの話です。
記事に特定のタグ(本Webサイトではethical_hacking)があったらバナーが出るようになっています。
※この記事はハッキングには関係ありませんが、デモ用に表示が出るようにしています。


一応情報公開のスタンスをここに書いておきます。

セキュリティ情報の公開について

セキュリティ情報を広く公開することは大事です。
最近は色々あったせいか、セキュリティ情報を共有する方が減りました。
特に使用者の意思によって悪用も可能になるハッキング技術(Exploit・Pentest・Anti Analysisなど)については、 勉強会が縮小したりブログを非公開にされる方が出るなど、惨憺たるものです。

ただこうやってセキュリティエンジニアが萎縮して結局得するのは攻撃者側だと思っているので(私自身の考えです)、これからも恐れることなくセキュリティ情報を発信していくつもりです。

意思表示

セキュリティ情報を公開するにしても、内容によっては当局にあらぬ疑いをかけられる可能が大いにあります。

ちゃんと情報公開の意図を閲覧者に伝えるために、記事内には「悪用禁止」など明確に意思を伝えないといけません。

そんな意思を伝えるのに、よくWebページの下に出てくるGDPR 用の表示がちょうどいいんじゃと思ったので使ってみることにしました。

ただブログにはセキュリティ情報以外の内容も投稿しますし、セキュリティについても悪用とは無縁な情報もあります。 なので、記事に特定のタグがあるときにだけ表示するようにしてみました。

※これはGDPR 対応用のものなので、一度同意したらクッキーが入り、クッキーが残っている限りは再度の表示はされません。

本ブログは Hugo で構築しているので、Hugo 向けの話になります。


作成手順

Cookie Consent でメッセージを作る

Cookie Consent という、MITライセンスの素晴らしいGDPR対応用のコードがあります。

https://cookieconsent.insites.com/

Download リンクをクリックすればバナーの作成画面に移ります。

バナー作成画面

バナー作成画面

説明通りに作っていけば下のレビュー用バナーがいい感じに変わっていき、設定に合わせたコードが右画面に出ます。
悩みどころは 5. Compliance type ですが、今回はGDPRとは関係ないので一番上の「Just tell users that we use cookies」でいいです。
設定し終わったら右部のコードをどこかに控えておきます。

※Hugoじゃない方は、右部のコード変えていい感じに使えばいいと思います。

表示対象のタグを設定する

Hugo の config ファイル(私の場合はconfig.toml)のParamsディレクティブにnoticeTagを追加します。

[Params]
noticeTag = "ethical_hacking"

ここで設定したタグがHugoの記事に設定されているとバナーが出るようになります。

使っているテーマのfooterあたりにマクロを入れる

ここは適当に自分の使ってるテーマに合わせて設定してください。 私は Beautifulhugo を使っているので、「layouts/partials/footer.html」の最初に仕込みました。

  {{ if .Params.tags }}
    {{ range .Params.tags }}
      {{ if eq . $.Site.Params.noticeTag }}
      <!-- ここに Cookie Consent のコードを入れる -->
      {{ end }}
    {{ end }}
  {{ end }}

私はfooter.htmlの最初に仕込んだので、以下のようになりました。

<footer>
  {{ if .Params.tags }}
    {{ range .Params.tags }}
      {{ if eq . $.Site.Params.noticeTag }}
  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
  <script>
    window.addEventListener("load", function(){
    window.cookieconsent.initialise({
      "palette": {
        "popup": {
          "background": "#000"
        },
        "button": {
          "background": "#f1d600"
        }
      },
      "content": {
        "message": "本ページはサイバー空間の安心・安全な環境を確保する目的で公開
しています。ここで知り得た情報は決して悪用しないでください。",
        "dismiss": "OK",
        "href": "/pages/about-disclosure-security-information/"
      }
    })});
  </script>
      {{ end }}
    {{ end }}
  {{ end }}

  <div class="container">
(snip)

これでもう一度静的ページをビルドすれば特定のタグが設定されているときだけバナーが出るようになります。


これでうまく意思が伝わればいいけど・・・。