Show script depending on innerwidth - without "potentially dangerous request.form"

Question

What I want:

I have a situation where I want to show affiliate ads on my website. These are basically javascripts, with content within them. As my site has a responsive design, I want to load different ads depending on the jQuery innerwidth property. So summed up: I want to load different javascripts depending on the innerwidth property.

What I have done:

I load two different javascripts in hiddenfields, and depending on the innerwidth, I show either one with the div.html() command. However, this gives the "potentially dangerous request.form" error when the user submits a post (ASP.NET defence of XSS), as the content loaded has dangerious characthers, which makes sense.

I could say "ValidateRequest=false" on all pages, but that's a horrible solution which would open a lot of security problems.

My thoughts...

The best way would be to load the ads from the server-side, but we don't know the browser width here. From what I've been able to read, it seems hard / impossible to get the innerwidth value at page_load.

But I would like to load my ads without making a potentially dangerious request.

Any ideas on how to solve this?

Answer 1

The solution I ended up with, was to set the HTML of to invisible divs, DivA and DivB, at Page_Load.

Then, in JavaScript, depending on the innerwidth property (and on the resize event), I could set the divs to visible/invisible.

Very simple solution, compared to what I was trying to do. Yes, it gives a little bit more rendered HTML, but at least it works and it's fast.