CODEWITHSUNDEEP
angularjscontent-security-policyunsafe-evalunsafe-inlinebootstrap-image-gallery
Abhishek Sharma
Abhishek Sharma

Reputation: 31

Issues with bootstrap-image-gallery.min.js and CSP headers in AngularJS project

I am using the bootstrap-image-gallery.min.js library in my AngularJS project. I have imported the library in my cshtml file, but I am facing issues with the modal popup. When the popup opens, the buttons (Next, Previous, Slideshow, Download) are hidden due to the hide, fade, and modal classes.

If I manually remove the hidden attribute, the buttons become visible, but clicking them does not trigger their respective functionalities. Additionally, I am using the following Content Security Policy (CSP) headers in my web.config :

<add name="Content-Security-Policy" value="script-src 'self' http: https: 'unsafe-inline' 'unsafe-eval';"/>

Cshtml file

<link href="~/Scripts/plugins/Bootstrap/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="~/Scripts/plugins/Bootstrap/bootstrap-image-gallery.min.css" rel="stylesheet" />

<link href="~/Scripts/plugins/FileUpload/jquery.fileupload-ui.css" rel="stylesheet" />

<link href="~/Content/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="~/Content/infragistics/infragistics.css" rel="stylesheet" />
<link href="~/Content/CustomCss/iggrid_mod.css" rel="stylesheet" />


<script src="~/Scripts/plugins/FileUpload/tmpl.min.js"></script>
<script src="~/Scripts/plugins/FileUpload/canvas-to-blob.min.js"></script>
<script src="~/Scripts/plugins/FileUpload/load-image.min.js"></script>


<script src="~/Scripts/plugins/Bootstrap/bootstrap-image-gallery.min.js"></script>

<script src="~/Scripts/plugins/FileUpload/jquery.iframe-transport.js"></script>
<script src="~/Scripts/plugins/FileUpload/jquery.fileupload.js"></script>
<script src="~/Scripts/plugins/FileUpload/jquery.fileupload-ip.js"></script>
<script src="~/Scripts/plugins/FileUpload/jquery.fileupload-process.js"></script>
<script src="~/Scripts/plugins/FileUpload/jquery.fileupload-ui.js"></script>

<script src="~/Scripts/plugins/FileUpload/locale.js"></script>
<script src="~/Scripts/plugins/FileUpload/main.js"></script>
<script src="~/Scripts/infragistics/iggrid_small.min.js"></script>
<div id="FileUploadPopupDiv" class="container-fluid" ng-controller="fileAttachement">
    <div style="width: 100%">
        <div class="row-fluid">
            <form id="fileupload" action="~/Areas/PhysicalRegister/Upload/UploadHandler.ashx" method="POST" enctype="multipart/form-data" style="margin: 2px;" class="well">
                <input type="hidden" id="GuidValue" name="GuidValue" value="{{guid}}" />
                <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                <div class="row fileupload-buttonbar">
                    <div class="span7">
                        <!-- The fileinput-button span is used to style the file input field as button -->
                        <span id="addFilesButton" class="btn btn-minier btn-round btn-success fileinput-button">
                            <i class="icon-plus icon-white"></i>
                            <span>Add files...</span>
                            <input type="file" name="files[]" multiple>
                        </span>
                        <button type="reset" class="btn btn-round btn-minier btn-warning cancel">
                            <i class="icon-ban-circle icon-white"></i>
                            <span>Cancel upload</span>
                        </button>
                    </div>
                    <div class="span5" id="myprogress">
                        <!-- The global progress bar -->
                        <div class="progress pos-rel active fade">
                            <!--[if lte IE 9]>
                    <span>File is uploading please wait...</span>
                <![endif]-->
                            <div class="bar" style="width: 0%; height: 120%">
                                <img src="~/Images/lightGreen.png" alt="image comming up...." width="100%" height="100%" />
                            </div>
                        </div>
                    </div>
                </div>
                <!-- The loading indicator is shown during image processing -->
                <div class="fileupload-loading"></div>
                <div class="col-lg-5 fileupload-progress fade">
                    <!-- The global progress bar -->
                    <div class="progress progress-striped active"
                         role="progressbar"
                         aria-valuemin="0"
                         aria-valuemax="100">
                        <div class="progress-bar progress-bar-success"
                             style="width: 0%;"></div>
                    </div>
                    <!-- The extended global progress state -->
                    <div class="progress-extended">&nbsp;</div>
                </div>
                <br>
                <!-- The table listing the files available for upload/download -->
                <table class="table table-striped">
                    <tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody>
                </table>

                <!-- modal-gallery is the modal dialog used for the image gallery -->
                <div id="modal-gallery" class="modal modal-gallery hide fade">
                    <div class="modal-header">
                        <a class="close" data-dismiss="modal">&times;</a>
                        <h3 class="modal-title"></h3>
                    </div>
                    <div class="modal-body">
                        <div class="modal-image"></div>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-primary modal-next">
                            <span>**Next**</span>
                            <i class="icon-arrow-right icon-white"></i>
                        </a>
                        <a class="btn btn-info modal-prev">
                            <i class="icon-arrow-left icon-white"></i>
                            <span>**Previous**</span>
                        </a>
                        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
                            <i class="icon-play icon-white"></i>
                            <span>**Slideshow**</span>
                        </a>
                        <a class="btn modal-download" target="_blank">
                            <i class="icon-download"></i>
                            <span>**Download**</span>
                        </a>
                    </div>
                </div>
                <button type="button" class="btn btn-minier btn-primary" ng-click="hitSubmit();">
                    <i class="icon-upload icon-white"></i>
                    <span>Upload</span>
                </button>
                <button ng-if="doneUploadButton" type="button" class="btn btn-minier btn-primary" ng-click="doneUpload()"><i class="icon-upload icon-white"></i><span>Done</span></button>
                <div ng-bind-html="loadingImage | trusted_html" id="spinnerGifDiv"></div>
            </form>
        </div>
        <div>
            <div id="grid-file-attchment" grid-load grid-height="0.25" grid-data-source="fileAttachments" grid-column-def="gridFileAttachmentColumnDef" grid-features="gridFileAttachmentFeatures">
                <table id="fileAttachmentGrid" class="table table-bordered"></table>
            </div>
        </div>
    </div>
</div>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
              <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% 
        for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}" height="42" width="42"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
@*            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                <i class="icon-trash icon-white"></i>
                <span>{%=locale.fileupload.destroy%}</span>
            </button>*@
            <input type="text" placeholder="Description" id="fileDesc_{%=file.name%}"></input>
@*            <input type="checkbox" name="delete" value="1">*@
        </td>
    </tr>
{% } %}
</script>

bootstrap-image-gallery.min.js File

(function(a){"use strict",typeof define=="function"&&define.amd?define(["jquery","./load-image.js","bootstrap"],a):a(window.jQuery,window.loadImage)})(function(a,b){"use strict",a.extend(a.fn.modal.defaults,{delegate:document,selector:null,index:0,href:null,preloadRange:2,offsetWidth:100,offsetHeight:200,canvas:!1,slideshow:0});var c=a.fn.modal.Constructor.prototype.show,d=a.fn.modal.Constructor.prototype.hide;a.extend(a.fn.modal.Constructor.prototype,{initLinks:function(){var b=this,c=this.options,d=c.selector||"a[data-target="+c.target+"]",e=0;a(c.delegate).find(d).each(function(d,f){var g=f.href||a(f).data("href");b.urls[b.urls.length-1]!==g&&(b.urls.push(g),b.titles.push(f.title),g===c.href&&(c.index=e),e+=1)}),this.urls[c.index]||(c.index=0)},startSlideShow:function(){var a=this;this.options.slideshow&&(this._slideShow=window.setTimeout(function(){a.next()},this.options.slideshow))},stopSlideShow:function(){window.clearTimeout(this._slideShow)},toggleSlideShow:function(){var a=this.$element.find(".modal-slideshow");this.options.slideshow?(this.options.slideshow=0,this.stopSlideShow()):(this.options.slideshow=a.data("slideshow")||5e3,this.startSlideShow()),a.find("i").toggleClass("icon-play icon-pause")},preloadImages:function(){var b=this.options,c=b.index+b.preloadRange+1,d,e;for(e=b.index-b.preloadRange;e<c;e+=1)d=this.urls[e],d&&e!==b.index&&a("<img>").prop("src",d)},loadImage:function(){var a=this,c=this.$element,d=this.options.index,e;this.abortLoad(),this.stopSlideShow(),this._loadingTimeout=window.setTimeout(function(){c.addClass("modal-loading")},100),e=c.find(".modal-image").children().removeClass("in"),window.setTimeout(function(){e.remove()},3e3),c.find(".modal-title").text(this.titles[d]),c.find(".modal-download").prop("href",this.urls[d]),this.loadingImage=b(this.urls[d],function(b){window.clearTimeout(a._loadingTimeout),c.removeClass("modal-loading"),a.showImage(b),a.startSlideShow()},a.loadImageOptions),this.preloadImages()},showImage:function(b){var c=this.$element,d=a.support.transition&&c.hasClass("fade"),e=d?c.animate:c.css,f=c.find(".modal-image"),g,h;f.css({width:b.width,height:b.height}),a(window).width()>480&&(d&&(g=c.clone().hide().appendTo(document.body)),e.call(c.stop(),{"margin-top":-((g||c).outerHeight()/2),"margin-left":-((g||c).outerWidth()/2)}),g&&g.remove()),f.append(b),h=b.offsetWidth,a(b).addClass("in")},abortLoad:function(){this.loadingImage&&(this.loadingImage.onload=this.loadingImage.onerror=null),window.clearTimeout(this._loadingTimeout)},prev:function(){var a=this.options;a.index-=1,a.index<0&&(a.index=this.urls.length-1),this.loadImage()},next:function(){var a=this.options;a.index+=1,a.index>this.urls.length-1&&(a.index=0),this.loadImage()},keyHandler:function(a){switch(a.which){case 37:case 38:a.preventDefault(),this.prev();break;case 39:case 40:a.preventDefault(),this.next()}},wheelHandler:function(a){a.preventDefault(),a=a.originalEvent,this._wheelCounter=this._wheelCounter||0,this._wheelCounter+=a.wheelDelta||a.detail||0;if(a.wheelDelta&&this._wheelCounter>=120||!a.wheelDelta&&this._wheelCounter<0)this.prev(),this._wheelCounter=0;else if(a.wheelDelta&&this._wheelCounter<=-120||!a.wheelDelta&&this._wheelCounter>0)this.next(),this._wheelCounter=0},initGalleryEvents:function(){var b=this,c=this.$element;c.find(".modal-image").on("click.modal-gallery",function(a){a.altKey?b.prev(a):b.next(a)}),c.find(".modal-prev").on("click.modal-gallery",function(a){b.prev(a)}),c.find(".modal-next").on("click.modal-gallery",function(a){b.next(a)}),c.find(".modal-slideshow").on("click.modal-gallery",function(a){b.toggleSlideShow(a)}),a(document).on("keydown.modal-gallery",function(a){b.keyHandler(a)}).on("mousewheel.modal-gallery, DOMMouseScroll.modal-gallery",function(a){b.wheelHandler(a)})},destroyGalleryEvents:function(){var b=this.$element;this.abortLoad(),this.stopSlideShow(),b.find(".modal-image, .modal-prev, .modal-next, .modal-slideshow").off("click.modal-gallery"),a(document).off("keydown.modal-gallery").off("mousewheel.modal-gallery, DOMMouseScroll.modal-gallery")},show:function(){if(!this.isShown&&this.$element.hasClass("modal-gallery")){var b=this.$element,d=this.options,e=a(window).width(),f=a(window).height();this.urls=[],this.titles=[],b.hasClass("modal-fullscreen")?this.loadImageOptions={minWidth:e,minHeight:f,maxWidth:e,maxHeight:f,canvas:d.canvas}:this.loadImageOptions={maxWidth:e-d.offsetWidth,maxHeight:f-d.offsetHeight,canvas:d.canvas},e>480&&b.css({"margin-top":-(b.outerHeight()/2),"margin-left":-(b.outerWidth()/2)}),this.initGalleryEvents(),this.initLinks(),this.urls.length&&this.loadImage()}c.apply(this,arguments)},hide:function(){this.isShown&&this.$element.hasClass("modal-gallery")&&(this.options.delegate=document,this.options.href=null,this.destroyGalleryEvents()),d.apply(this,arguments)}}),a(function(){a(document.body).on("click.modal-gallery.data-api",'[data-toggle="modal-gallery"]',function(b){var c=a(this),d=c.data(),e=a(d.target),f=e.data("modal"),g;f||(d=a.extend(e.data(),d)),d.selector||(d.selector="a[rel=gallery]"),g=a(b.target).closest(d.selector),g.length&&e.length&&(b.preventDefault(),d.href=g.prop("href")||g.data("href"),d.delegate=g[0]!==this?this:document,f&&a.extend(f.options,d),e.modal(d))})})});

What I Have Tried:

Frontend image

Upvotes: 0

Views: 123

Answers (0)

Related Questions