0

I'm presently working my way through Learning JavaScript Design Patterns by Addy Osmani, and trying to figure out how I can make these patterns functional and/or useful in the Salesforce Aura/Lightning World.

I'm currently adapting the example of decoupling an Ajax-based jQuery application, whereas the example integrates the Flickr API.

However, this causes a conflict with SFDC's Content Security Policy:

aura_prod.js:1 Refused to load the script 'https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=jQuery32103925277995984642_1511369718111&tags%5B%5D=dsfdsfsdfsdf&tagmode=any&format=json&_=1511369718112' because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-91babd51-a9e8-f0ab-0d12-48caa9402923' chrome-extension: 'unsafe-inline' 'unsafe-eval' https://sfdc.azureedge.net *.eu11.visual.force.com https://ssl.gstatic.com/accessibility/".

Which I am now trying to resolve.

For whatever it is worth, this is my component:

Markup:

    <aura:component>
    <ltng:require scripts="{!join(',', 
                                $Resource.jquery_3_2_1_min_JS, 
                                $Resource.PUBSUB_EventBus2_JS
                            )}"
        afterScriptsLoaded="{!c.demonstrate}" 
    />  

    <aura:attribute access="private" type="String" name="tags" />

    <lightning:input aura:id="query" name="tag" label="Tag" value="{!v.tags}" />
    <lightning:button variant="brand" label="Submit" onclick="{!c.searchFlicker}"/>

    <div aura:id="lastQuery"></div>
    <ol aura:id="searchResults"></ol>
</aura:component>

Controller:

({
    demonstrate : function(component, event, helper) {
        $Jsdp.EventBus2.subscribe('/search/tags', helper.displayLastQuery(component));
        $Jsdp.EventBus2.subscribe('/search/resultSet', helper.performSearch(component));
        $Jsdp.EventBus2.subscribe('/search/tags', helper.displayResultTemplate(component));
    },

    searchFlicker : function(component, event, helper) {
        var tags = component.get('v.tags').trim();
        if (tags) {
            $Jsdp.EventBus2.publish('/search/tags', [tags]);
        }
    }
})

Helper:

    ({
    displayLastQuery : function(component) {
        return function(topic, tags) {
            component.find('lastQuery')
                .getElement()
                .innerHTML = '<p> Searched for: '
                                + '<strong>' + tags + '</strong>'
                            + '</p>';
        }
    },

    performSearch : function(component) {
        var self = this;
        return function(topic, tags) {
            var params = {results: tags};
            $A.createComponent('c:PUBSUB_FlickerSearchResults', params, self.appendResults(component));
        };
    },

    appendResults : function(component) {
        return function(newElement, status, errorMessage) {
            if (status === 'SUCCESS') {
                var renderBox = component.find('searchResults');
                var body = renderBox.get('v.body') || [];
                body.push(newElement); 
                renderBox.set('v.body', body);  
            }
            else {
                console.error('Something went wrong!:', errorMessage);
            }   
        };
    },

    displayResultTemplate : function(component) {
        var self = this;
        return function(topic, tags) {
            var params = {
                tags: tags,
                tagmode: 'any',
                format: 'json'
            };
            $.getJSON(
                'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?',
                params, 
                self.publishResultSet
            );
       }
    },

    publishResultSet: function(data) {
        if (data && data.items && data.items.length) {
            $Jsdp.EventBus2.publish('/search/resultSet', {items: data.items});
        }
    }
})

I have already added http://api.flickr.com as a CSP Trusted Site Definition.

I've seen SFDC's page on Specifying a CSP Level, but I'm not entirely clear where such a manifest.json should live. Do I need to add jquery to an zip file so they could live together? Should this live in my Lightning component bundle? Should the manifest be a separate state resource? How do I need to reference this?

-1

Due to security, it won't load external scripts. Somewhere, something you are loading is calling out to that script, and even though you have the site trusted, you have to have those scripts all stored locally in static resources.

  • Sorry, but you seem to have missed the point. The point is to use jquery to call the remote Flickr API to fetch data. It is CSP which is preventing the callout. I wish to create an exception within CSP so I can retrieve the data without going through the backend. – Brian Kessler Nov 23 '17 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.