0

So unfortunately when developing my WP plugin I created some methods that will help me generate HTML elements and their attributes with document.createElement.

One example function is provided below. (this block of code is not important for the question)

    // Create HTML Elements for the form/etc. elements to be added.
    createHTMLElements = (data: CreateFormData[]): HTMLElement[] => {
        let formElements: HTMLElement[] = [];

        for (const entry of data)...

        // Create the HTML element based on parameters passed.

        return formElements;
    }

The type of html being generated are <input>, <form>, <button>, <a> etc. They are all user inputs that is going to be sent to the back-end with ajax requests so they have to be escaped.

This issue I am running into is since most of the HTML generation is in JS I am not able to use esc_*_e to properly implement security on my plugin. Also, I realized there will be issues with translating text since there is no standard way through wordpress from js to attach a text-domain for the tranlsator. (at least to the best of my knowledge).

Before I re-do everything into PHP that is done in JS, I had some questions.

  1. If I decide to keep everything in JS, would that be a major security risk for XSS? Even if I escape it with custom made JS functions?
  2. Is there any way to attach a text-domain onto an attribute or html when escaping it through JS? I only ask cause maybe I can handle that in JS with a custom function.

It is looking like that I will be having to rewrite everything in PHP but I figured I should ask before I start the many lines of code to convert. Appreciate any help and thanks for your time.

4
  • There's not enough context here to answer #1. What is being output? What is the source? Why is it being output in JavaScript? Regarding #2, see: make.wordpress.org/core/2018/11/09/… May 25 at 16:10
  • Good point, I will update the question after this. So what is being generated are mainly <inputs> <forms> <buttons> <a>, etc. all with many attributes depending on the situation, Atributes such as name, url, src, etc. Nearly all of this will be user inputs so they have to be escaped. I hope this is enough context.
    – Andrew Lee
    May 25 at 16:18
  • Is there a reason they're being generated with JavaScript and not in a template? May 25 at 16:19
  • It was a foolish error on my part. I wanted to try using mostly JS and ran into this issue.
    – Andrew Lee
    May 25 at 16:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.