I am perfectly aware that I can sanitize innerHTML-bound data using:
<div innerhtml.bind="someData | sanitizeHTML"></div>
However, based on my observations, this sanitization only removes <script> tags. It doesn't protect the user from event-driven content such as:
"Hi! I am some HTML-formatted data from the server! <button onclick="getRekt();">Click me for butterflies!</button>"
Is there a better way to prevent ANY type of javascript or event callbacks from being rendered on the element?
The sanatizeHTML value converter is a very simple sanitizer, and only remove the scripts tags. See the code here.
You can create your own value converter with a more complex santizer. Check this answer for more details about how to sanitize html in a browser.
But don't forget to never trust the browser, if you can it's better to sanitize the html in the server side before to send it to the browser to display it.
Related
I ran into an issue where Vue threw errors that x wasn't defined if I tried displaying user content such as:
<span><%= field.content %></span>
This is ruby which processes server side, it would output something like: "Hi, it's {{todays_date}} today." which Vue would then process. {{todays_date}} is not intended to be parsed by Vue, but is rather intended as a domain specific language.
I then read up on v-pre and that works to escape the content:
<span v-pre><%= field.content %></span>
However, I now realize that anywhere I'm displaying the user content throughout the entire app could have the same issue. When it breaks, it breaks the entire site.
Note that the ruby syntax is to provide context, but really it could be any database field output that is derived from user input.
What is the best way to handle this? It seems like overkill to use v-pre on every single view where I'm displaying user input.
I've tried the following to format a date in the locale of the browser:
<script>document.write((new Date(2021, 4, 14)).toLocaleString().split(",")[0])</script>
However, based on this question Document.write clears page it seems like it is writing after the document stream is closed, thereby opening a new stream and replacing the content on my page.
Using htmx is there a recommended way of formatting dates to the browser locale?
Is there an htmx tag that allows me to execute this javascript safely?
This is the html I'm using to invoke htmx:
<div hx-get="/open_orders"
hx-trigger="load"
hx-target="this"
hx-swap="outerHTML">
<img class="htmx-indicator"
src="[[=URL('static', 'images/spinner.gif')]]"
height="20"/>
</div>
-Jim
As you mentioned, document.write() does not play well with htmx. This is true for most front-end libraries/toolkits/frameworks that want to control what is displayed in the browser window.
Instead, there are a number of ways you could do this instead:
Try rendering the time on your server and simply displaying the value via htmx. This library works best when you put the server in charge whenever you can. I would recommend starting with this, if you can, instead of rendering a date via Javascript.
If you really need to update this information on the browser (for instance, to update the display as the data changes, write to a specific DOM element instead:
<span id="time"> </span>
<script>
document.getElementById('time').innerHTML = currentTime();
</script>
You can also hook in to a wide range of events that htmx triggers. This works well if you want to update information on the browser whenever htmx does something -- for instance, you can update the date/time displayed whenever htmx loads a new html fragment into the DOM.
I need to be able give users a link to my site with a parameter that will control their experience on the destination page, but, of course, Moqui does not allow parameters to be passed as a GET transaction. What are ways that I can work around that? It needs to be something that can be sent in an email, via sms and audibly.
An error message would be helpful know exactly what you are running into, but it sounds like the constraint to mitigate XSRF attacks.
The error message for this situation explains the issue and the recommended solution: "Cannot run screen transition with actions from non-secure request or with URL parameters for security reasons (they are not encrypted and need to be for data protection and source validation). Change the link this came from to be a form with hidden input fields instead."
You can pass URL parameters to screens to be used in code that prepares data for presentation, but not to transitions for code that processes input. The solution is to use a hidden form with a link or button to submit the form (that can be styled as a link or button or however you want). This is slightly more HTML than a plain hyperlink with URL parameters, but not a lot more and there are examples in various places in the Moqui itself.
If you are using an XML Screen/Form you can use the link element to do this with the #link-type attribute set to "hidden-form" or "hidden-form-link" (which just uses a hyperlink styled widget instead of a button styled one). If the #link-type attribute is set to "auto" (which is the default) it will use a hidden-form automatically if link goes to a transition with actions.
In plain HTML one possible approach looks something like this:
<button type="submit" form="UserGroupMemberList_removeLink_0">Remove</button>
<form method="post" action=".../EditUserGroups/removeGroup" name="UserGroupMemberList_removeLink_0">
<input type="hidden" name="partyId" value="EX_JOHN_DOE">
<input type="hidden" name="userGroupId" value="ADMIN">
</form>
Note that the button element refers to the form to submit, so can be placed anywhere in the HTML file and the form element can be placed at the end or anywhere that is out of the way (to avoid issues with nested forms which are not allowed in HTML).
in a login page, i want to use sendKeys to password input
but the "sendkeys" doesn't work;
how should i do?
here is html
<fieldset class="txt" id="psd">
<label>password：</label>
<script type="text/javascript">
IntPassGuardCtrl("logpswd", "2", "chklogon()",Ipsdstyle");</script>
<span id="logpswd_pgc">
<embed id="logpswd" type="application/x-pass-guard" input0="0" class="psdstyle"></span>
<input name="LOG_PSWD" type="hidden" id="LOG_PSWD"> </fieldset>
someone said can use JNA ,but the partial i do not know much.
the password control can use mouse click,then focus on; and use the
keybord input infomation;
so i want to use mouse click the control,but use webdriver actions
doesn't work, do you have some ways to solve the problem?
Looks like your application uses an embeded object to capture the password field. Unfortunately, the web browser (and thus WebDriver) doesn't know how to interact with the field since its not standard.
However, there might be a chance to do what you need to do. It looks like your HTML includes a hidden input field that might be tied to the embeded object. The embeded object might just set the value of the (encrypted?) password in the input#LOG_PSWD element. If this is the case, you can use WebDriver's executeScript method to inject the value of the password.
I don't know what language bindings you use, but this is how you would write it in Ruby:
password = "some$3cretP#ssword"
hidden_password = #driver.find_element(:id => "LOG_PSWD")
#driver.execute_script("arguments[0].setAttribute(arguments[1], arguments[2])", hidden_password, "value", password)
Then try to login from there. More than likely the password text will not show up in the control itself since you are injecting it directly to the hidden input.
Give that a shot and let us know what happens. If you can give us more information about the embeded object, we might be able to find some other workarounds if this one doesn't work.
I need to create a code to change an example text to a user-defined value when the user types in an input field (Similar to the preview field when writing a question on Stack Overflow).
This needs to be achieved without the use of HTML5 or Flash as the users will be running IE8, not all will have Flash plug-ins installed.
As such I have started by looking at DHTML to achieve the desired effect. Currently I can change the example text when a user types in the input field but only to a pre-defined value ("Example" in the code below), how should I edit this code to display the user-defined value?
JS
function changetext(id)
{
id.innerHTML="Example";
}
HTML
<form>
Content:<input type="text" id="input" onkeyup="changetext(preview)" />
</form>
<p id="preview">No content found</p>
You need to have something like this in the function:
function changetext(id){
var info = document.getElementById('input').value();
id.innerHTML = info;
}
This js is not fully correct. I would highly recommend you start using a javascript library like jQuery. It makes this a menial task.
Edited:
jQuery will work in IE8 just fine. in jQuery you will not need to attach js to your input. The code would look like this.
$('#input').click(function(){
$('#preview).html(this.val());
});
It is a lot cleaner and doesnt have js in the html.