ブラウザによって動作が違う？

Question

前提・実現したいこと

WEBの通常UIの中に登録した内容を加工し、HTML形式で保存する
WrodPress上で動作するプログラムを書きました。
それは、Chormeでは動作するもののそれ以外のブラウザでは動作しません。

発生している問題・エラーメッセージ

保存されるデータが異なっている。

該当のソースコード

// 編集
if($_POST['id'] != 0){
	$my_post = array(
		'ID'           => $_POST['id'],
		'post_title'   => $_POST['Title'],
		'post_content' => $Source,);
	wp_update_post( $my_post );
	update_post_meta( $_POST['id'], 'gaikan', wp_get_attachment_url($ID_OutImg));
	update_post_meta( $_POST['id'], 'title', wp_get_attachment_url($ID_TitleImg));
	update_post_meta( $_POST['id'], 'map', $_POST['Map']);
	
}
else{// 新規
	$my_post = array(
		'post_title'    => $_POST['Title'],
		'post_content'  => $Source,
		'post_status'   => 'publish',
		'post_author'   => 1,
		'post_category' => array( 2,2 ));
	$post_id = wp_insert_post( $my_post );
	add_post_meta( $post_id, 'gaikan', wp_get_attachment_url($ID_OutImg), false );
	add_post_meta( $post_id, 'title', wp_get_attachment_url($ID_TitleImg), false );
	add_post_meta( $post_id, 'map', $_POST['Map'], false );
}
?>

試したこと

提示したソースの$Sourceには、UIから取得したデータを成型したHTMLテキストが入っています。
保存処理前に、$Sourceを出力した結果を
・Chromeでの出力結果
・IEでの出力結果
・Firefoxでの出力結果
で比較しましたが、入力した変数を出力しているだけなので当然同じ出力になります。
なのに、'post_content'の中身が保存後には違う形で保存されているのです。

補足情報（FW/ツールのバージョンなど）

この症状のトリガとなるのが、Map情報です。
こちらはグーグルマップから取得したiframeのテキスト情報が入ります。
これを登録すると内容がおかしくなるのです。

Comments

[tabuu]

>提示したソースの$Sourceには、UIから取得したデータを成型したHTMLテキストが入っています。
具体的にどのようなテキストがpost_contentに登録されているのでしょうか？
そのテキストはどのように表示しているのでしょうか？（the_content等で表示している？）

[tarokiti]

HTMLの内容：
******************************************
<div id="main">
<h1>〇</h1>
<style type="text/css">#main th { font-size: 16px; }#main td { font-size: 18px; font-weight: bold; }</style>
<figure class="wp-block-image size-large"><img loading="lazy" width="600" src="" alt="" class="wp-image-731"/></figure>
<figure class="wp-block-image size-large is-resized"><iframe グーグルマップ loading="lazy"></iframe></figure>
<figure class="wp-block-image size-large"><img loading="lazy" width="600" src="" alt="" class="wp-image-733"/></figure>
<figure class="wp-block-table is-style-stripes">
<table id="kakaku" border="2">
<thead>
</thead>
<tbody>
</tbody>
</table>
******************************************
>そのテキストはどのように表示しているのでしょうか？
こちらの表示自体はWordPress標準の出力です。
投稿のページにアクセスしているのみです。

[tarokiti]

失敗しているソース：
******************************************
<div id="main">
<h1>〇</h1>
<p>#main th { font-size: 16px; }#main td { font-size: 18px; font-weight: bold; }</p>
<figure class="wp-block-image size-large"><img width="600" src="" alt="" class="wp-image-731" /></figure>
<figure class="wp-block-image size-large is-resized"></figure>
<figure class="wp-block-image size-large"><img width="600" src="" alt="" class="wp-image-733" /></figure>
<figure class="wp-block-table is-style-stripes">
<table id="kakaku" border="2">
<thead>
<tr>
</tr>
</thead>
<tbody>
</thead>
<tbody>
</tbody>
</table>
******************************************

[tabuu]

成功しているソース、失敗しているソースは質問本文をマークダウン形式で修正いただくと見やすくなりますので次回よりお願いします。

失敗しているソースですが、
・styleがpタグになっています
・最後のfigureタグが閉じていません
・tbodyの開始タグとtheadの閉じタグが1つずつ多いです

[退会済みユーザー]

今からでも遅くないから、HTMLソースも質問文に書いて見やすくして欲しい。見づらいわかりづらいってだけでアドバイスが集まりにくくなるし。
不完全なHTMLからくる、webブラウザごとの解釈の違いが、挙動の違いを誘発したのかもしれませんね。HTMLソースを https://validator.w3.org にかけてみて、致命的なエラーが無くなるよう改善と図るとよいのではないかと。

[tarokiti]

ご回答ありがとうございます。
ソース見にくくてすみません。

本件、私の書き方が悪かったかもしれません。

成功しているソースは、UI入力情報から成型したもので＄Sourveに保存されており
ブラウザから取得したデータです。

要は、【PHPにて成功ソースを保存しているにも関わらず、なぜか出力する際に失敗ソースのように出力されてしまう】です。
DBのpostデータで既に失敗ソースが保存されているので、ブラウザの問題というより
PHPもしくはWordPressの使いかた？なのかと考えております。

[tabuu]

>WEBの通常UIの中に登録した内容を加工し、HTML形式で保存する
>WrodPress上で動作するプログラムを書きました。
通常UIって何ですか？具体的にどうような入力値を受け取って、どのように加工しているかお願いします。

>提示したソースの$Sourceには、UIから取得したデータを成型したHTMLテキストが入っています。
省略せずにテキストの内容を質問文に追加してください。

>・Chromeでの出力結果
>・IEでの出力結果
>・Firefoxでの出力結果
>で比較しましたが、入力した変数を出力しているだけなので当然同じ出力になります。
ブラウザで表面的に同じようにレンダリングされているだけではないですか？
バイナリレベルで一致していますか？

>なのに、'post_content'の中身が保存後には違う形で保存されているのです。
WordPress、PHP、MySQLのどれかが加工している可能性はありますので
上記確認をお願いします。

>こちらはグーグルマップから取得したiframeのテキスト情報が入ります。
iframeのコンテンツまで取得しているのでしょうか？
どのように取得してWordPressのPHPプログラムに渡しているのでしょうか？

[tarokiti]

結局、原因は分かりませんが
wp_update_post　をやめて　$wpdb->update　で
直接DB操作を行うと正常に動作しました。。。

Answer 1

多分wp_ksesを通しているかいないかの違い

ブラウザによって違うのではなく
管理者などタグの制限をされないユーザーとして
ログインしているかいないかではないかと推察

Comments

[tarokiti]

ご回答ありがとうございます。

＞多分wp_ksesを通しているかいないかの違い
これは、wp_update_post が内部で私の作成したHTMLを、wp_kses が
加工したということでしょうか？

＞ログインしているかいないかではないかと推察
これは想像もしてませんでしたが、確かにChromeにだけはログインしてますね
しかし、いずれにしてもこれらを処理しているのはサーバ側で、ログインの有無で
サーバの処理(WordPress)が変わるということですか？？

そういえば客先でChromeで実施したときに、書けなかったのも差異と言えば
細かな設定違いとログインの有無ですね。

[KazuhiroHatano]

管理者など一定以上の権限のあるユーザーでログインしていないと
wp_insert_postなどの投稿の処理の前に
wp_ksesで許可されたタグ以外のタグを除去する処理がされます

一応フィルタフックで一時的に無効にしたり
許可するタグを増やしたりもできますが
安易に緩めるとXSS脆弱性になります

wp_ksesを一時的に無効にするとかするなら
ユーザーが任意のコードを投稿する余地がないようにするか
コンテンツの内容が不正なものでないかのチェックはちゃんと行いましょう

[tarokiti]

返信遅れました。
なるほど、そういう仕組みが入っていたのですね。
しかし使用しているのはエンドユーザなのでその辺りで権限問題が発生するとは
知りませんでした。
その辺り含めて勉強させていただきます、ありがとうございました！