Skip to content

added warning for html.script #970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 23, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 49 additions & 1 deletion src/reactpy/html.py
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
"""

**Fragment**

- :func:`_`
Expand Down Expand Up @@ -409,7 +410,12 @@ def _script(
key: Key | None,
event_handlers: EventHandlerDict,
) -> VdomDict:
"""Create a new `<{script}> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script>`__ element.
"""Create a new `<script> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script>`__ element.

.. warning::

Be careful to sanitize data from untrusted sources before using it in a script.
See the "Notes" for more details

This behaves slightly differently than a normal script element in that it may be run
multiple times if its key changes (depending on specific browser behaviors). If no
Expand All @@ -421,6 +427,48 @@ def _script(
content of the script changes. The function may itself optionally return a teardown
function that is called when the script element is removed from the tree, or when
the script content changes.

Notes:
Do not use unsanitized data from untrusted sources anywhere in your script.
Doing so may allow for malicious code injection. Consider this **insecure**
code:

.. code-block::

my_script = html.script(f"console.log('{user_bio}');")

A clever attacker could construct ``user_bio`` such that they could escape the
string and execute arbitrary code to perform cross-site scripting
(`XSS <https://en.wikipedia.org/wiki/Cross-site_scripting>`__`). For example,
what if ``user_bio`` were of the form:

.. code-block:: text

'); attackerCodeHere(); ('

This would allow the following Javascript code to be executed client-side:

.. code-block:: js

console.log(''); attackerCodeHere(); ('');

One way to avoid this could be to escape ``user_bio`` so as to prevent the
injection of Javascript code. For example:

.. code-block:: python

import json
my_script = html.script(f"console.log({json.dumps(user_bio)});")

This would prevent the injection of Javascript code by escaping the ``user_bio``
string. In this case, the following client-side code would be executed instead:

.. code-block:: js

console.log("'); attackerCodeHere(); ('");

This is a very simple example, but it illustrates the point that you should
always be careful when using unsanitized data from untrusted sources.
"""
model: VdomDict = {"tagName": "script"}

Expand Down