SecurityError: The operation is insecure. php

Question

Trying to create thumbnail image from video.

I am getting SecurityError Anyone please help me.

This is my Script

<video id="video" src="<?php echo $file_path; ?>"  onerror="failed(event)"  controls="controls" preload="none" ></video>

    <script type="text/javascript">
        var index = 0;
        var video = document.getElementById('video');
        var starttime = 0.00;  // start at 7 seconds
        var endtime = 0.00;    // stop at 17 seconds
        video.addEventListener("timeupdate", function () {
            if (this.currentTime >= endtime) {
                this.pause();
                getThumb();
            }
        }, false);
        video.play();
        video.currentTime = starttime;
        function getThumb() {
            var filename = video.src;
            var w = video.videoWidth;//video.videoWidth * scaleFactor;
            var h = video.videoHeight;//video.videoHeight * scaleFactor;
            var canvas = document.createElement('canvas');
            canvas.width = w;
            canvas.height = h;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, w, h);
            //document.body.appendChild(canvas);
            var data = canvas.toDataURL("image/jpg");
            //send to php script
            var xmlhttp = new XMLHttpRequest;
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    console.log('saved');
                }
            }
            console.log('saving');
            xmlhttp.open("POST", 'process_thumb.php', true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
        }
    </script>

I'm getting this error in Firefox's Console:

SecurityError: The operation is insecure. thumbnail_process.php:26
getThumb
<anonymous>

Any help would be appreciated.

@Sinto This is "var data = canvas.toDataURL("image/jpg");" in line 26 — Yennam Praveenkumar, Aug 22 '18 at 06:42
Possible duplicate of [canvas.toDataURL() Security Error The operation is insecure](https://stackoverflow.com/questions/25753754/canvas-todataurl-security-error-the-operation-is-insecure) — Loek, Aug 22 '18 at 06:47
Is the video actually on the same server? Or does the `$file_path` point to another server? — Loek, Aug 22 '18 at 06:52

score 0 · Answer 1 · answered Feb 01 '20 at 08:59

When load Image or video from different directory then it is also consider as cross domain request in local host. so we need to set crossOrigin tag to video element that tell canvas that loaded video is from another domain. so canvas not to be tainted.

without crossOrigin tag, video maybe load but canvas is tainted. In short tainted canvas can't be converted into image. so error was raised.

I have not try this solution but you can try it. I have added crossOrigin tag in video:

<video id="video" src="<?php echo $file_path; ?>"  onerror="failed(event)"  controls="controls" preload="none" ></video>

<script type="text/javascript">
    var index = 0;
    var video = document.getElementById('video');
    var starttime = 0.00;  // start at 7 seconds
    var endtime = 0.00;    // stop at 17 seconds
    video.crossOrigin = "anonymous";
    video.addEventListener("timeupdate", function () {
        if (this.currentTime >= endtime) {
            this.pause();
            getThumb();
        }
    }, false);
    video.play();
    video.currentTime = starttime;
    function getThumb() {
        var filename = video.src;
        var w = video.videoWidth;//video.videoWidth * scaleFactor;
        var h = video.videoHeight;//video.videoHeight * scaleFactor;
        var canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
        //document.body.appendChild(canvas);
        var data = canvas.toDataURL("image/jpg");
        //send to php script
        var xmlhttp = new XMLHttpRequest;
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log('saved');
            }
        }
        console.log('saving');
        xmlhttp.open("POST", 'process_thumb.php', true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
    }
</script>

SecurityError: The operation is insecure. php

1 Answers1