1. ホーム
  2. javascript

[解決済み] \JSのコードに "gucci "という文字がある。どこから来たんだ?

2022-03-03 20:17:49

質問

NetBeans IDE 7.0.1を使用して、Webアプリのフロントエンドを開発しています。最近、非常に厄介なバグが発生し、最終的に修正しました。

例えば、次のようなコードです。

var element = '<input size="3" id="foo" name="elements[foo][0]" />';
$('#bar').append(element);

を見たとき、何かが間違っていることに気がつきました。 size 属性は、Chromeでは機能しません(他のブラウザでは確認していません)。インスペクタでその要素を開くと、次のように解釈されました。

<input id="&quot;3&quot;" name="&quot;elements[foo][0]&quot;" 
    size="&quot;foo&quot;" />

というのは、かなり不思議でした。手動で再入力した後 element の文字列を文字単位で入力すると、バグがなくなりました。この変更を元に戻したとき、Netbeansが私の古いコードにあるいくつかのユニコード文字について警告していることに気づきました。それは \u200b - の後、[]['の間、そして文字列の最後には幅ゼロのスペースがあります。ゼロ幅のスペースは表示されないので、文字列は正常に見えますが、それらをエスケープした後の文字列は

'<input size=\u200b"3" id=\u200b"foo" name=\u200b"elements[foo]\u200b[0]" />\u200b'

さて、一体どこで手に入れたのでしょう?

のコードをどこにコピーしたのかよくわからない。 element のどちらかであることは間違いありません。

  • Netbeans Editor の他のペインで、HTML テンプレートファイルを表示します。
  • Google Chromeのインスペクタ、「HTMLとしてコピー」アクション。
  • Google Chromeのソース表示ページ(かなり怪しい)

しかし、そのどちらでもバグが再現できない。

Windows7でNetbeans7.0.1、Google Chrome13.0を使用しています。キーボードスイッチャーなどは起動していません。また、バージョン管理にはGitを使っていますが、そのコードを引っ張ってきたわけではないので、Gitが原因である可能性は非常に低いと思います。同僚はとてもマナーが良いので、馬鹿な冗談を言うわけにもいきません。

私のコードを台無しにしたのは誰なのか、何か心当たりはありませんか?

解決方法は?

ここで一刺し。

Google Chromeのインスペクターに賭ける。 検索 Chromium のソースから、私は 次のブロックのコード

    if (hasText)
        attrSpanElement.appendChild(document.createTextNode("=\u200B\""));

    if (linkify && (name === "src" || name === "href")) {
        var rewrittenHref = WebInspector.resourceURLForRelatedNode(node, value);
        value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
        attrSpanElement.appendChild(linkify(rewrittenHref, value, "webkit-html-attribute-value", node.nodeName().toLowerCase() === "a"));
    } else {
        value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
        var attrValueElement = attrSpanElement.createChild("span", "webkit-html-attribute-value");
        attrValueElement.textContent = value;
    }

単に私が間違っている可能性もありますが、属性の表示時にゼロ幅のスペースが挿入されているように見えます(テキストのソフトラッピングを処理するため?おそらく、quot;Copy as HTML"機能で適切に削除されていないのでは?


更新情報

Chromeの要素インスペクタをいじってみたところ、迷子の \u200b が出てきました。可視スペースだけでなく = でマッチした文字、または /([\/;:\)\]\}])/ を挿入することで、ゼロ幅のスペースを確保することができます。

<イグ

残念ながら、クリップボードに誤って含まれてしまうという問題を再現することはできません(Win XPでChrome 13.0.782.112を使用しました)。

それは確かに価値がある バグレポートを提出する この挙動を再現することができるのであれば、ぜひ試してみてください。