Can the WordPress API run inside fetched posts?

  • anonymized-15870942

    (@anonymized-15870942)


    2 years, 8 months ago

    I’m successfully fetching and displaying post content using the WordPress API:

    const postContentDiv = document.getElementById('thePost');
 const apiUrl = 'https://example.com/wp-json/wp/v2/posts?slug=example-post;
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
  const postContent = data[0].content.rendered;
  postContentDiv.innerHTML = postContent;
})

    However, the given post contains custom HTML with JavaScript which, for our example case, is of this kind:

    <script>
document.addEventListener("DOMContentLoaded", function(event) {
  foo();
});
function foo() {
  return new Promise(resolve => {
    console.log("foo");
  })
}
</script>

    I see the <script> tags attached to the DOM, but it’s not running. I first tried with eval() which didn’t work, then I thought the problem was the document.addEventListener block, but some attempts to remove it apparently don’t work either.

    Any suggestions?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter anonymized-15870942

    (@anonymized-15870942)

    2 years, 8 months ago

    (For some unfathomable reason, it seems the interface sanitizes “<script>” added to the post title, which should read: “Can the WordPress API run <script> inside fetched posts?”)

    Alan Fuller

    (@alanfuller)

    2 years, 8 months ago

    You will need to read the content into a DOM structure and extract / remove the script part -set the rest of the content to the inner html but append the extracted script to the document head to run it.

    Thread Starter anonymized-15870942

    (@anonymized-15870942)

    2 years, 7 months ago

    Thanks for the reply. If you mean something like the following, I tried that but no luck (the <script> tag shows up in the DOM, as before, but isn’t running):

    fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
    const postContent = data[0].content.rendered;
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = postContent;
    const scriptElements = tempDiv.getElementsByTagName('script');
    for (let i = 0; i < scriptElements.length; i++) {
      const script = scriptElements[i];
      const newScript = document.createElement('script');
      newScript.innerHTML = script.innerHTML;
      document.head.appendChild(newScript);
    }
    postContentDiv.innerHTML = tempDiv.innerHTML;
})

    Is there some core security setting relevant to the WordPress API that doesn’t allow running scripts? I’m quite puzzled by this.

    Alan Fuller

    (@alanfuller)

    2 years, 7 months ago

    In theory it should work – if the script is good. Have you tried manually extracting the script from the content return and see if it is actually valid.

    Thread Starter anonymized-15870942

    (@anonymized-15870942)

    2 years, 7 months ago

    Yeah, the script is good. I cut the content of <script>, pasted it in the console in the Developer Tools, and it works, with the caveat that it doesn’t fire immediately (I assume because of the document.addEventListener("DOMContentLoaded", function(event) {foo();}); block). But pasting the content of <script> and then manually calling foo(); works as intended.

    So, it seems there is something else at play here.

    • This reply was modified 2 years, 7 months ago by anonymized-15870942.
Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Can the WordPress API run inside fetched posts?’ is closed to new replies.