How Can I Integrate the Flickr API with a Lightning App?

Question

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?

Answer 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.