Develop Reference

Salesforce, Locker: Cannot "createObjectURL" using a unsecure [object File]

I'm having some problem with a lightning component that was done by other developer that left the company, users are telling me that the tool was working perfectly 1 month ago but i don't have any idea of what is happening then
The error is :
This page has an error. You might just need to refresh it. Action
failed: c:EMB_CCW_Panel$controller$onPickFile [Locker: Cannot
"createObjectURL" using a unsecure [object File]!] Failing descriptor:
{c:EMB_CCW_Panel$controller$onPickFile}
and the javascript method is this one
onPickFile : function(component, event, helper) {
var catalog = component.get("v.catalogWrapper");
var brandsList = component.get("v.brandsList");
console.log("onPickFile", catalog);
var file = event.target.files[0];
var fileURL = URL.createObjectURL(file);
var req = new XMLHttpRequest();
req.open('GET', fileURL);
req.onload = function() {
URL.revokeObjectURL(fileURL);
component.set("v.catalogWrapper",
helper.fillCatalogWithXMLData(catalog, helper.extractSlideNotesFromODTContentXML(this.responseXML), brandsList));
};
req.onerror = function() {
URL.revokeObjectURL(fileURL);
console.log('Error loading XML file.');
};
req.send();
},
and the helper methods,
extractSlideNotesFromODTContentXML : function(xmlDoc){
var output = [];
var slides = xmlDoc.getElementsByTagName("draw:page");
for(var s=0;s<slides.length;s++){
var notes = slides[s].getElementsByTagName("presentation:notes")[0].getElementsByTagName("draw:frame")[0].getElementsByTagName("draw:text-box")[0].getElementsByTagName("text:p");
var slideNotesList = [];
for(var i =0;i<notes.length;i++){
slideNotesList.push(notes[i].textContent);
}
output.push(slideNotesList);
}
return output;
},
fillCatalogWithXMLData : function(catalog, slidesList, brandsList){
try {
var referenceRegEX = /^(\d){9}/;
for(var i=0;i<slidesList.length;i++){
catalog.slides.splice(i, 0, this.generateSlideObject(i+1));
for(var j=0;j<slidesList[i].length;j++){
var wholeLine = slidesList[i][j];
var firstWord = wholeLine.split(" ")[0].toUpperCase();
console.log('firstWord', firstWord)
// Lines that begin with a number are references (SAP Id code). Consider the rest brand names:
if(referenceRegEX.test(firstWord) && firstWord.length == 9){
catalog.slides[i].referencesText += wholeLine+"\n";
}else{
// That's not a reference, check if it's a brand:
// 1.- Check if the whole line is a brand (removing leading and trailing spaces)
if(brandsList.includes(wholeLine.trim())){
// Found brand:
catalog.slides[i].brandsText += wholeLine + "\n";
}else{
// Not found, not recognized:
catalog.slides[i].unrecognizedText += wholeLine + "\n";
}
}
}
}
component.set("v.catalogWrapper", catalog);
} catch(err) {
}
return catalog;
}
anyone can't help me or tell me how can i fixe it !
thanks

If it used to work 1 month ago it's probably something Salesforce patched in Summer release. No idea what (if anything) is unsecure in your code but sounds like you're hit by Lightning Locker Service. Do you get same result in different browsers?
See if it works if you knock back the API version of component to version 39. It's a hack but might be a temp relief while you figure out what to do.
This suggests File is supported all right: https://developer.salesforce.com/docs/component-library/tools/locker-service-viewer
Maybe you need to read the file's content different way, maybe you need to give up on parsing it with JavaScript and push to server-side apex? I don't know what your functionality is.
If you go to setup -> lightning components -> debug mode and enable for yourself it might help a bit. You will see more human-friendly code generated in browser's developer tools, debugging might be simpler. Lesson learned would be to pay more attention to release preview windows (from ~September 12th we can preview Winter'21 release, SF should publish blog post about it in 1-2 weeks)
This looks promising: https://salesforce.stackexchange.com/a/245232/799
Maybe your code needs proper Aura accessors, event.getSource().get("v.files")[0] instead of event.target.files[0]. You really would have to debug it and experiment in browser's console, see what sticks.

Is there a way in javascript to get all iframes that don't violate same-origin-policy with getElementsByTagName?

I am writing a chrome extension that needs to get an html5 video element on a page, but some video elements were in iframes. I added onto my function to search through iframes, but I started getting errors because of the Same-Origin-Policy related to iframes with different src domains.
In my function, is there an easy way to exclude iframes that violate the Same-Origin-Policy? Or better yet (even though likely not possible), is there a way to still search iframes with different src domains from the main page?
The function in question:
function getVideo() {
var videos = document.getElementsByTagName("video");
if (videos.length >= 1) {
return videos[0];
}
var iframes = document.getElementsByTagName("iframe");
if (iframes.length >= 1) {
for (const frame of iframes) {
videos = frame.contentWindow.document.getElementsByTagName("video");
if (videos.length >= 1) {
return videos[0];
}
}
}
return null; // if a video doesn't exist
}

Edit:
See bottom of answer for current solution.
Original Answer:
Just when you think you have searched long enough on here to warrant a question, you find something that is actually useful.
Based off the answer to this question, I updated my code to this:
function getVideo() {
var videos = document.getElementsByTagName("video");
if (videos.length >= 1) {
return [videos[0], "main"];
}
// Code that will run only inside iframe
if (parent === top) {
var videos = document.getElementsByTagName("video");
if (videos.length >= 1) {
return [videos[0], "iframe"];
}
}
return [null, null]; // if a video doesn't exist
}
And included this in my manifest, so that the script would be injected into the iframes as well:
"content_scripts": [{
"all_frames": true,
...
...
}],
This works, but it does make my other functions pretty ugly. Example:
// if a video exists, set it to the speed and give a notification
function setSpeed(newSpeed) {
var returnVal = getVideo();
var video = returnVal[0], type = returnVal[1];
if (video != null && type === "main") {
video.playbackRate = newSpeed;
inWindowAlert("Speed: " + newSpeed, 1000);
setIcon(newSpeed);
}
if (parent === top) {
if (video != null && type === "iframe") {
video.playbackRate = newSpeed;
inWindowAlert("Speed: " + newSpeed, 1000);
setIcon(newSpeed);
}
}
}
I will try to come up with a cleaner solution, but for now it works. Hope this helps anyone.
New Solution:
Just wanted to update this to say that I completely rewrote the extension's logic to handle this more easily.
The new solution lets each instance of the content script running in each frame run independently and simply collect all videos in its context. I also collect them in a Set to avoid accidental duplication.
I still want to go through again to eliminate the usage of global variables, but the extension works well enough now, so it will likely remain as it is for awhile.
New code:
function getVideos() {
let new_videos = document.getElementsByTagName("video");
if (new_videos.length >= 1) {
VIDEOS = new Set(new_videos);
return VIDEOS;
}
return new Set();
}
and
// set video to the speed and give a notification, restricts available speeds
function setSpeed(newSpeed, video) {
//* BUG-FIX: playback rates below 0.07 rather than 0 were causing errors
newSpeed = newSpeed > 16 ? 16 : newSpeed < 0.07 ? 0 : newSpeed;
// limit decimal values to 2 digits, + in front truncates 2.00 -> 2
SPEED = +newSpeed.toFixed(2);
video.playbackRate = SPEED;
tempAlert("Speed: " + SPEED, 2000, video);
setIcon(SPEED);
}
Where VIDEOS and SPEED are global variables.

"Script is broken" but works in codepen

I have a codeblock that I want to use to display projects in my portfolio that works in codepen but when I try to code it into my cargo collective site it comes back with the error that "the script is broken". The HTML and CSS are working properly only the JS is showing an error
<script>
const wheelEventName = (navigator.userAgent)
? "wheel"
: "mousewheel";
const layers = [...document.querySelectorAll(".layer")];
const tracker = document.querySelector(".track-active");
const trackerNumber = document.querySelector(".track-number");
let itemDisplayed = 0;
let animationPlaying = false;
function resetClasses() {
for (let i = 0; i < 4; i++) {
layers[0].children[i].classList.remove("item-displayed");
layers[1].children[i * 2].classList.remove("item-displayed");
}
}
document.addEventListener(wheelEventName, event => {
if (!animationPlaying) {
const nextItem = itemDisplayed + Math.sign(event.deltaY);
if (nextItem >= 0 && nextItem <= 3) {
itemDisplayed += Math.sign(event.deltaY);
layers[0].style = `transform: translateX(${-itemDisplayed * 85}vw);`;
layers[1].style = `transform: translateX(${-itemDisplayed * 85 * 2}vw);`;
layers[1].children[itemDisplayed * 2].classList.add("item-revealed");
resetClasses();
layers[0].children[itemDisplayed].classList.add("item-displayed");
layers[1].children[itemDisplayed * 2].classList.add("item-displayed");
tracker.style = `transform: translateX(${itemDisplayed * 100}%);`;
trackerNumber.innerText = `0${itemDisplayed + 1}`;
setTimeout(() => {
animationPlaying = false;
}, 2200);
animationPlaying = true;
}
}
});
</script>
Here is the codepen link that includes the HTML and CSS
https://codepen.io/pnshah115/pen/PMJBzZ

In my case I was naming a function as tryUntilDone, so I tried different changes until found the problem. There was a conflict with the name of the function. So I changed the name, and now its working:
From
function tryUntilDone () {}
to
function _tryUntilDone () {}
So the error can come from many places, but this solved my problem many times. So dont forget to try changing your variables name.
Another trick
Saving the same file more than once sometimes reports fake "script is broken" error. To avoid this error follow the steps:
Write some random code to make the script invalid. Save (it will report an error, obviously).
Reload the page
Remove the random code and save again. It will be accepted now.
Seems like executing the same script without reloading reports error and cargo thinks its an invalid script.

Downloading a file through web application [best practice]

I am new with web application development. I have a code that lets you download a file after passing a basic authentication. It is working so far but I am not sure if this is the correct solution in achieving this solution. Or is there a drawback using this solution?
The "download" processing is being handled on a javascript using this code.
function downloadFile() {
var s = queryString("fn");
var f = "/web/et/" + s;
if (s.length > 1) {
window.open(f, "Download");
}
}
function queryString(parameter) {
var loc = location.search.substring(1, location.search.length);
var param_value = false;
var params = loc.split("&");
for (i = 0; i < params.length; i++) {
param_name = params[i].substring(0, params[i].indexOf('='));
if (param_name == parameter) {
param_value = params[i].substring(params[i].indexOf('=') + 1)
}
}
if (param_value) {
return param_value;
}
else {
return ""; //Here determine return if no parameter is found
}
}
#EDIT:
Sorry if I forgot to include the question, my question is, Is there a drawback on using this kind of solution? (pertains to downloading a file using javascript). Or is there a better solution for downloading a file aside from using a javascript?

I would handle any authentication on the server side b/c it is too easy to manipulate the (plainly) visible JS source. Not sure if that helps.

SIMPLE Flash Detection

I know about Adobe's Flash Detection kit - but is there any way to find out simply if Flash is installed/supported by the visitor? If the browser supports Flash, that's great, but I don't care what version. I'm struggling to find a simple bit of JavaScript that would do the trick. Has anyone seen something like this?
Cheers!

http://code.google.com/p/swfobject/

JavaScript Flash Detection Library (Flash Detect)
"A (pure) JavaScript library designed to simplify the process of detecting if
the Adobe Flash Player is installed in a Web Browser."

<script language="JavaScript">
function detectPlugin() {
// allow for multiple checks in a single pass
var daPlugins = detectPlugin.arguments;
// consider pluginFound to be false until proven true
var pluginFound = false;
// if plugins array is there and not fake
if (navigator.plugins && navigator.plugins.length > 0) {
var pluginsArrayLength = navigator.plugins.length;
// for each plugin...
for (pluginsArrayCounter=0; pluginsArrayCounter < pluginsArrayLength; pluginsArrayCounter++ ) {
// loop through all desired names and check each against the current plugin name
var numFound = 0;
for(namesCounter=0; namesCounter < daPlugins.length; namesCounter++) {
// if desired plugin name is found in either plugin name or description
if( (navigator.plugins[pluginsArrayCounter].name.indexOf(daPlugins[namesCounter]) >= 0) ||
(navigator.plugins[pluginsArrayCounter].description.indexOf(daPlugins[namesCounter]) >= 0) ) {
// this name was found
numFound++;
}
}
// now that we have checked all the required names against this one plugin,
// if the number we found matches the total number provided then we were successful
if(numFound == daPlugins.length) {
pluginFound = true;
// if we've found the plugin, we can stop looking through at the rest of the plugins
break;
}
}
}
return pluginFound;
} // detectPlugin
function detectFlash() {
pluginFound = detectPlugin('Shockwave','Flash');
// if not found, try to detect with VisualBasic
if(!pluginFound && detectableWithVB) {
pluginFound = detectActiveXControl('ShockwaveFlash.ShockwaveFlash.1');
}
// check for redirection
if (pluginFound) {
alert ("You has teh flash");
}
}
detectFlash();
</script>
Adapted from:
http://developer.apple.com/internet/webcontent/detectplugins.html