📖

Growiのカスタムスクリプトを使ってjavascript:void(0)になったリンクを修復する

に公開

概要

普段、Growiをナレッジベースとして使っています。
DrawIOなども利用できて、マニュアルからアーキ図まで管理できる優れものです。
https://growi.org/ja/

そんなGrowiですが、バージョンアップによってSVNプロトコルのリンクが無効化されてしまいました。
今回はそんなケースの対応法について紹介します。

バージョンを上げたらSVNのリンクが効かなくなった

色々な制約があって、最新バージョンではないv6.0.15に上げました。
元々のバージョンはv5.1.4でした。

すると下記のように記載していたリンクが効かなくなりました。

[SVNリンク](svn:xxxxxxxxx)

出力

<a href="javascript:void(0)" target="_blank">SVNリンク</a>

HTTP,HTTPS以外のプロトコルが潰されている?

作業にあたって先に以下のアップデート情報には目を通していました。
https://docs.growi.org/ja/admin-guide/upgrading/60x.html

これの中のXSS対策関連の影響を受けているのかなと思い、管理画面からXSS設定を無効にしたりしましたが解消されませんでした。
ただ、他のリンクも含めて調べたところHTTP,HTTPS以外のプロトコルのリンクがjavascript:void(0)に置き換えられているようでした。

カスタムスクリプトで対応

Growiにはカスタムスクリプトという機能があります。
全ページ共通して任意のJavascriptを埋め込むことができる機能です。
主にはGoogle Analyticsのタグの設置などで使われますが、今回はこれを利用することにしました。
詳細は以下です。

window.addEventListener('load', () => {
    setTimeout(() => {
      // <a href="javascript:void(0)">になっている箇所を見つける
      document.querySelectorAll('a[href="javascript:void(0)"]').forEach(link => {
        const text = link.textContent?.trim();
        // 本来のリンク先は消されてしまっているので、textContentに"svn:xxx"を含んでいるかで判定する
        const matched = text.match(/svn:\/\/[^\s]+/);
        // ヒットしたらhrefをさらに上書きする
        if (matched) {
          const svnUrl = matched[0];
          link.setAttribute('href', svnUrl);
          link.setAttribute('title', svnUrl);
          link.style.color = '#00B16B';
          link.style.textDecoration = 'underline';
        }
      });
    }, 1000); // 画面の記述量によってはもっと遅延させた方がいい??
});

コメントに書いている通りですが、Growiの画面が描画されてから1秒後にhref="javascript:void(0)"なaタグを探して、textContentにsvn:xxxxを含むものだけhrefやcolorなどを置き換えるようにしています。

わざわざsetTimeoutしている理由ですが、もともとはwindow.addEventListener("DOMContentLoaded")で処理を走らせていましたが、うまく動作しませんでした。
どうやらGrowi側で画面描画後に色々やっているようで、それが済んでからリンクの置き換えを行いたかったのでこのように記載しています。

まとめ

今回はGrowiで特定のリンクがjavascript:void(0)になってしまう事象と、その対策についてまとめました。
セキュリティに関わるアップデートによるものだと推察しているので、社内やチーム内で使用する閉じた環境でのGrowiで利用するといいかなと思います。

今回の内容が役立ちましたら幸いです。

Discussion