0

I have a array which store some base64 values like the one below:

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD ..."

I made this function:

var base64Matcher = new RegExp("^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{4})$");
$.each(inputValues, function(key, value) {
    if (base64Matcher.test(value)) {
        $('#' + key).attr('src', value);
    } else {
        $('#' + key).val(value);
    }
});

Based on this post but when I try to load values I get this error:

SecurityError: The operation is insecure

How did you test if value is base64 encode and then set the src attribute right? Here is a image showing what holds inputValues is just values I just found trough those values and if it's base64 encode then I set src because that is a image, the function fails only when I load a image

enter image description here

PS: I checked this and this post without success, any?

Community
  • 1
  • 1
Reynier
  • 2,250
  • 11
  • 47
  • 85
  • 1
    What kind of element has a `value` and a `src`? Your variable names suggest you are looping input elements? If so... the `src` attribute doesn't exist. I don't think that is throwing the security error, but it would certainly cause this code to fail to display images. You want an `img` tag for that, which doesn't support the `value` attribute. All things considered, it isn't clear what you're trying to do here. – Chris Baker Sep 09 '13 at 20:53
  • well this is a form that hold a image in `base64` this `base64` is stored in `src` attribute of a `img` tag, what I'm try to do is to store this value in some temporary var and then retrieve in another img – Reynier Sep 09 '13 at 21:01
  • 1
    I understand that. But, reading your code, you are using `$('#' + key).val(value);` which would not do anything to an image tag -- but it would set the value of a form input. At any rate, can you set up an example of this on jsFiddle? This is a strange error, and superficially it seems like you're missing some important detail. Try to set up a reproduction of the error on jsfiddle.net and add the link to your question. I'll check back and see if I can figure something out, if someone else hasn't yet. – Chris Baker Sep 09 '13 at 21:29
  • @Chris forget about `inputValues` name as is just a name, if you take a look at the image I leave you those are the values that the var holds. What I'm doing is testing the value and if it has some `base64` is because it's part of a `img` tag. This is how I store values in `inputValues`: `$('#product-create-step-' + current + ' input, #product-create-step-' + current + ' img').each(function() { var that = $(this); var thatis = this.src || this.value; inputValues[that.attr('id')] = thatis; });` notice that I store the `id` of each img or input – Reynier Sep 10 '13 at 14:02
  • @Chris so when I move using `$.each` on `inputValues` and made the test using regular expression then I try to set the values back as `$('#' + key).attr('src', value);` if it has a base64 code or $('#' + key).val(value); if it's a normal input. For the second option it works fine meaning when elements are INPUT but for the first I got the error, sadly I can't setup any example since this is part of a Symfony2 bundle I'm working on for a project, hope with this info you have any ideas of what is wrong or what is causing the issue – Reynier Sep 10 '13 at 14:06
  • Go to this fiddle: http://jsfiddle.net/PrRsX/, put your base64 string in the proper place, then click "Update" on the menu, then post the link here. This will isolate the action that you suspect causes the error -- I really don't think it is related to the image at all. This will find out. Also, what Firefox version? – Chris Baker Sep 10 '13 at 16:57

0 Answers0