- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-02-05T20:28:09+09:00","default:kanateko0404","kanateko0404")
RIGHT:&tag(カスタマイズ,プラグイン改造);
#author("2022-07-06T04:29:04+09:00;2022-05-22T15:51:36+09:00","default:kanateko","kanateko")
&tag(カスタマイズ,プラグイン改造);
#contentsx
*変更箇所のまとめ [#b2cbdde4]
-XSS対策
-ベースネーム表示機能の追加。
-画像非表示機能の追加。
-ページ名からリンクを作成する機能を追加。 (内部リンクのみ)
-画像保存機能の廃止。
-ベースネーム表示機能の追加。
-その他細かい変更、CSSの調整など。
*変更の詳細 [#sf783ded]
**XSS対策を施す [#xss]
そのまま使うとXSSの危険性があったためいくつか修正を施す。
**ページ名からリンクを作成する [#h598e79a]
作成済みのWiki内ページに限りページ名で指定できるようにする。存在しないページを指定した場合はエラーを表示。
***URLが不正であった場合にエラーを返すようにする [#df9631c3]
デフォルトだとURL先のページが存在しなかった場合でもカードの作成に入ってしまうので、そこを修正する。
#prism(diff-php diff-highlight){{
$graph = OpenGraph::fetch($ogpurl[0]);
if ($graph) {
...
- }
+ } else return '#ogp Error: Page not found.';
$args = func_get_args();
$uri = get_script_uri();
+ if (strpos($args[0], '://') === false) {
+ if (! is_page($args[0]) return '#ogp Error: Pagenot found.'
+ $args[0] = get_page_uri($args[0], PKWK_URI_ABSOLUTE);
+ }
$ogpurl = (explode('://', $args[0]));
}}
***カード作成前にサニタイズする [#c290a14b]
例えばリンク先がWikiだった場合、存在しないページでも編集画面に繋がってしまう。
そのため上記修正のみだと不十分なため、return前の適当な場所で引数をサニタイズしておく。
**ベースネーム表示機能を追加 [#h7cc6ff8]
#prism(diff-php diff-highlight){{
$imgtag = 'img class="ogp-img"' ;
}
+ $ogpurl[0] = htmlspecialchars($ogpurl[0]);
return <<<EOD
}}
修正箇所を2つ挙げたものの、XSS対策としては2つ目 (サニタイズ) のみでも大丈夫。多分。
**ベースネーム表示と画像非表示オプションを追加 [#h7cc6ff8]
:ベースネーム表示機能|
Wikiだとページ名が "AAA/BBB/CCC" のように階層化されている場合がある。
この "CCC" に当たる部分がベースネーム。
階層が深くなりすぎると、ページ名が長すぎて行数制限内に収まりきらないことがあるため、オプションでベースネームのみを表示するように指定できるようにする。
:画像非表示機能|
デフォルトだとリンク先のOGPタグに画像が指定されていないと表示が崩れるため、画像そのものを非表示にする機能を追加する。
最後の方にあるampオプションの処理部分を改変する。
#prism(diff-php diff-highlight){{
-if($ogpurl[1] == "amp"){
- $imgtag = 'amp-img class="ogp-img" layout="fill"' ;
-} else {
- $imgtag = 'img class="ogp-img"' ;
-}
+foreach ($ogpurl as $param) {
+ switch ($param) {
+ case 'amp': // amp
+ $imgtag = 'amp-img class="ogp-img" layout="fill"' ;
+ break;
+ case 'noimg': // 画像なし
+ $imgtag = 'img class="ogp-noimg"';
+ break;
+ case 'base': // ページのbasenameのみを表示 (Wiki系のサイト用)
+ $title = array_pop(explode('/',$title));
+ }
+}
+if (!isset($imgtag)) $imgtag = 'img class="ogp-img"';
$title = $graph->title;
$url = $graph->url;
$description = $graph->description;
+ if (in_array('base', $args)) {
+ $title = array_pop(explode('/', $title));
+ }
if( isset($graph->{'image:secure_url'}) ){
$src = $graph->{'image:secure_url'};
} else {
}}
CSSに以下を追加。
#prism(css){{
img.ogp-noimg { display: none; }
}}
**その他細かい変更 [#l316a6b4]
このサイトでは外部リンクに自動でアイコンを追加するようになっているので、見栄え的にリンクをタイトルではなく下部のURLにする。デザインの関係からいくつかクラスも追加。
**画像を保存しないようにする [#s3af354b]
当方の環境だとcacheフォルダ内に保存した.imgファイルが正常に表示できなかったため、リンク先のサイトの画像URLをそのまま使うことにした。
まずは.imgを作成する部分を削除。
#prism(diff-php diff-highlight){{
$datcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.dat';
-$imgcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.img';
return <<<EOD
<div class="ogp">
<div class="ogp-img-box $noimgclass">$fallback1<img loading="lazy" class="ogp-img" src="$src" alt="$title" width="100" height="100">$fallback2</div>
- <div class="ogp-title"><a href="$args[0]" target=”_blank” rel="noreferrer">$title<span class="overlink"></span></a></div>
- <div class="ogp-description">$description</div>
- <div class="ogp-url">$args[0]</div>
+ <div class="ogp-title bold">$title</div>
+ <div class="ogp-description small">$description</div>
+ <div class="ogp-url small ellipsis"><a href="$args[0]" target=”_blank” rel="noreferrer">$args[0] <span class="overlink"></span></a></div>
</div>
EOD;
}}
あとはCSSの方でホバーアニメーションを追加したり、スマホ表示用レイアウトを追加したり。
キャッシュがある場合の処理を改変。
#prism(diff-php diff-highlight){{
$description = $ogpcachearray[1];
- $src = $imgcache ;
+ $src = $ogpcachearray[2];
} else {
}}
*更新履歴 [#zd9d78cb]
:2022-05-22|
本体の更新に対応。カスタムURL用に内部リンク用の関数を変更したり。
:2021-03-28|
プラグイン本体の方が更新されていたので、それに対応し記述を修正。
XSS対策やnoimgオプションを取り込んでいただけたようで、嬉しい反面自身もコーディングに自信があるわけではないのでちょっとドキドキする。
キャッシュがない場合の処理を改変
*プラグイン配布元 [#o7247373]
#ogp(https://oncologynote.com/?12173bf026)
#prism(diff-php diff-highlight){{
- $imgfile = file_get_contents($src);
- $imginfo = pathinfo($src);
- /* $imgname = $imginfo['basename']; */
- file_put_contents($datcache, $title . '<>' . $description . '<>' . $ogpurl[0]);
+ file_put_contents($datcache, $title . '<>' . $description . '<>' . $src);
- file_put_contents($imgcache, $imgfile);
}}
これで画像を保存しなくても表示できるようになる。
ページの表示速度も保存した場合と特に変わらず。
*コメント [#od0c917c]
質問や指摘などあればどうぞ。
----
#pcomment(reply)
質問や指摘などあればどうぞ。
#pcomment(,10,above,reply)
