オブジェクトtoXMLへ変換する関数内で、?や&を含むと処理が上手く行きません。

Question

概要

payloadをxmlでPOSTする必要があるAPIがあります。
XMLは使いづらいため、オブジェクトをXMLに変換する関数を作りましたが、URLなどに?や&を含んだ場合、XMLの変換が上手くいかずAPI POST時に失敗してしまいます。

実際の関数

export function OBJtoXML(obj:any) {
  var xml = '';
  for (var prop in obj) {
    xml += "<" + prop + ">";
    if(Array.isArray(obj[prop])) {
        for (var array of obj[prop]) {
            // A real botch fix here
            xml += "</" + prop + ">";
            xml += "<" + prop + ">";

            xml += OBJtoXML(new Object(array));
        }
    } else if (typeof obj[prop] == "object") {
        xml += OBJtoXML(new Object(obj[prop]));
    } else {
        xml += obj[prop];
    }
    xml += "</" + prop + ">";
  }
  var xml = xml.replace(/<\/?[0-9]{1,}>/g,'');
  return xml
}

サンプルの引数

    const param = {
      ShipCompanyCode: 'サンプル',
      ShipInvoiceNumber1: '573479387598',
      ShipDate: '2022/1/1',
      ShipUrl: `https://sample.com\?searchKind=S004\&locale=ja\&reqCodeNo1=573479387598`
    }

質問

おそらく原因はURLの?にあると思います。そこでエスケープを入れましたが、やはり上手く行きません。
どなたアドバイス頂けないでしょうか？

Answer 1

To: @yuki_90453 さん

文字参照

原因は既存の回答通りエスケープされていないからで、XMLでは文字参照か数値参照でエスケープする必要があります。

• 2.4 文字データとマークアップ Character Data and Markup - Extensible Markup Language (XML) 1.1 (第二版)

アンパサンド文字(&)と左山括弧(<)は、マークアップ区切り子として使われる場合、あるいはコメント、処理命令、CDATAセクションの中に現れる場合を除き、直接現れてはならない(must not)。もしそれらの文字を他の場所で使わなければならない場合は、数値による文字参照を使うか、それぞれ文字列"&"と"<"を使うかしてエスケープしなければならない(must)。右山括弧(>)は、通常はそうする必要は無いが、文字列">"で表しても良い。但し、文字列"]]>"がCDATAセクションの終わりを意味する為に現れたのでなければ、互換性の為に、その文字列の中に現れる右山括弧を">"か文字参照を使ってエスケープしなければならない(must)。

---

"&" 以外に "<>" もエスケープされていない問題があります。

function OBJtoXML(obj) {
  var xml = '';
  for (var prop in obj) {
    xml += "<" + prop + ">";
    if (Array.isArray(obj[prop])) {
      for (var array of obj[prop]) {
        // A real botch fix here
        xml += "</" + prop + ">";
        xml += "<" + prop + ">";
        xml += OBJtoXML(new Object(array));
      }
    } else if (typeof obj[prop] == "object") {
      xml += OBJtoXML(new Object(obj[prop]));
    } else {
      xml += obj[prop];
    }
    xml += "</" + prop + ">";
  }
  var xml = xml.replace(/<\/?[0-9]{1,}>/g, '');
  return xml;
}

console.log(OBJtoXML({foo: '<baz>&amp;&#100;'})); // <foo><baz>&amp;&#100;</foo>

XMLSerializer.prototype.serializeToString()

一度、Document に挿入してDOM処理してから、XMLにシリアライズするのが最も確実だと思います。

const doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
const foo = doc.documentElement.appendChild(doc.createElement('foo'));
foo.textContent = '<bar>foo&bar</bar>';
const str = new XMLSerializer().serializeToString(doc).replace(/^<html[^>]*>|<\/html>/g, '');

console.log(str); // <foo>&lt;bar&gt;foo&amp;bar&lt;/bar&gt;</foo>

<>& のエスケープ程度なら String#replace でも実装可能ですが、要素に扱える文字種の判定(例: "<" は要素名に指定できない)など細かな文法規則を全て自前でチェックするのは現実的ではありません。

document.createElement('<foo>'); // DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<foo>') is not a valid name.

配列

要求仕様次第ですが、配列の扱いも多分、おかしいです。

console.log(OBJtoXML({array:[1,2,3]})); // <array></array><array></array><array></array><array></array>
console.log(OBJtoXML([1,2,3])); // 123

Comments

[yuki_90453]

ありがとうございます！

Answer 2

URLなどに?や&を含んだ場合、XMLの変換が上手くいかず

XMLで&をエスケープしたい場合、&と変換する必要があります。