Can this example of jQuery .attr() be exploited by XSS attack? - javascript

Below I have an example that is being flagged by my code scan tool as a potential XSS vulnerability:
$('#someField').attr('value', $('#dropdown option:selected').text());
This is just setting the value attribute of a field using the selected option text of a dropdown menu. Assuming the text of the dropdown option is unsafe and untrusted, how can this be exploited via XSS? (Note this code gets triggered to run when a separate dropdown change event is fired).

Related

How to change default parsley.js UI/UX behaviour?

Here is documentation about UI/UX (link). But default parsley.js mottos not suitable for my project, especially the following:
Quick error removal: when a field is detected and shown as invalid,
further checks are done on each keypress to try to quickly remove
error messages once the field is ok.
Now I've set {uiEnabled: false} and want manually to implement behaviour, which is suitable for me. Here is few thing I need:
I don't want parsley to bind keypress event. Revalidation must be done only with next submit.
Is it possible to show errors block for the particular form item? I mean after validation with disabled UI, I have all information about invalid objects, but I can't find public API method which will append error block for some item[s].
parsleyField.addError not working with disabled UI
How can I implement this with parsley.js?
Change the triggerAfterFailure option to ''.
Look at the errorsContainer option. Could be a function that does the append I believe.
Good luck.

How to hide the select value from the form

I have a form which have a select drop down. i have disabled it by default and will re enable it based on some conditions. i don't want anybody to access the select option values when it is disabled(now it can be viewed by inspecting the element from browser). how do i make it secure?
I don't think you can. You might be better off populating it when it's needed instead of enabling it. You could do that with an Ajax call.
You need to use ngIf directive.
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
Usage
<select ng-if="someCondition"></select>
If you use a simple binding library like knockout.js you can use container-less binding which will only render the select DOM when you want.
Knockout is is a great little library which plays nicely with most other libraries so shouldn't cause any trouble, all you ned to do is import the js file.
Container-less binding will only render the DOM when it needs to, so inspecting the page element will not display the select box.
<!--ko if: IsShown -->
<select>Render Me</select>
<!--/ko-->
Here is a simple fiddle to show you how to make it work.
Knockout Containerless Binding
You could avoid rendering it, which would hide it from the DOM inspector, but the data would still be in the browser and available to a user who cared to look in the right place.
If you don't want the user to see the data, then don't send it to the client in the first place.
When you want to display the select element, make an Ajax request to the server. Then perform authentication and authorisation to make sure the user is allowed to see the data. Then return it in the response and have Angular generate the select using that data.
There is no way to hide part of code from viewing by user in browser, because browsers have to see the code to run it, so it can be viewed by user. But, using php can help you to generate content for page only when it's needed. I think you can generate content for your drop-down, or the whole dropdown using that way.

How to bind as html parts of a string in angularjs?

I am trying to make a simple wysiwyg editor with angularjs. I am making ajax requests with every keyup in a div content editable which is sanitized. So HTML tags are converted into other codes. Now how do I deliberately add styles to it?
If you use contenteditable you are actually editing the DOM/HTML node, not just a text representation.
To get the HTML code for an element you can retrieve element.innerHTML.
Try it out here with Chrome: open developer console (F12), select a node, add the contenteditable attribute. Type $0 in the console and you will see the [highlighted] element. Type $0.innerHTML and you will see the code.
Might also be of interest, though it's not really objective: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480
Not sure how you are doing sanitation but you should only strip out script tags and leave everything else alone. This will not protect you from all possible XSS attacks as it's a really hard topic and better handled through whitelisting.

Select2 adds a title attribute to form controls

I'm using Select2 version 3.4.8 and have recently noticed that the code is adding a title attribute to each form control in my page, using the text of the associate label for the title. I assume the Select2 developers meant this as an accessibility improvement, but it is a dubious choice, as there already is an associated label.
I am looking for a way to disable this without patching select2.js directly. I've looked through the documentation and couldn't find anything. Is there a way to do this, or do I either have to patch select2.js (perhaps commenting out line 692) or write a few lines of script to remove title attributes after they've been added to .select2-container divs? (Or is this fixed in version 3.5.0?)
When loading the page add the following script:
$(".select2-selection__rendered").removeAttr('title');
This will remove the title.
The title attribute here is useless, but also harmless. It gets applied to an offscreen version of the element that has tabindex="-1". An element with tabindex="-1" cannot receive keyboard focus by default, and this will never be announced by assistive tech (unless explicitly given focus with javascript).
Only the associated label will be announced. I've verified this behavior with VoiceOver/Chrome.

WYSIWYG that restricts HTML that can be put in

I am looking for a WYSIWYG that will allow me to specify a whitelist of HTML tags that are allowed in the textarea and renders them, whilst discarding anything else. This validation would need to run if the user copies and pastes content in or editing the HTML manually.
Sort of like HTML Purifier but in a Javascript WYSIWYG.
I have played around with CKEditor's dataProcessor.dataFilter setting but that would need to list every tag to EXCLUDE so its a blacklist rather than a whitelist.
Any ideas?
Edit...
Please don't simply suggest use {xyz} editor. I am looking for suggestions with code samples showing how to use the suggested editor in this manner.
Using tinyMCE you can have a list of valid elements, invalid elements, and extended valid elements
You can see the code for these and play with the configuration options on tinyMCE's website by looking at examples
When the form is submitted or the remove formatting button is pressed (as in this example) the validation is ran and pulls out all the non-valid formatting.
You must be careful for this does not ensure that a malicious user will not directly send you non-valid html and try to cause a XSS attack. This means you still need validation on the server side if you intend to serve the html up to users again.

Resources