I've been trying to set up a CSP to work with Office UI Fabric React. Is it possible to get anything more secure than style-src 'unsafe-inline'?
We have a Create React App with TypeScript and we're using Office UI Fabric React to provide a consistent look and feel.
Using csp-html-webpack-plugin and craco, when INLINE_RUNTIME_CHUNK=false is set it is possible to generate the CSP with hashes for styles and scripts for our own code.
The problem occurs with Office UI Fabric React - it injects 7 or 8 styles into the page via merge-styles and #microsoft/load-themed-styles.
I haven't been able to find any references to anyone else talking about setting up a CSP with Office UI Fabric React, let alone any potential solutions.
Have a missed a really obvious setting and documentation?
Thanks
Chris
Thank you for bring this to our attention. We added support for 'nonce' in #uifabric/merge-styles v6.17.0. The nonce is specified on FabricConfig object:
window.FabricConfig = {
mergeStyles: {
cspSettings: { nonce: 'mynonce'}
}
}
or
Stylesheet.getInstance().setConfig({
cspSettings: {
nonce: "abc"
}
});
(See complete example in https://codesandbox.io/s/0x1okoklrv)
Related
I am very new to Strapi and I have bigcommerce theme where I should implement content from Strapi.
How can I import content from Strapi to my bigcommerce theme?
In my bigcommerce theme I have config.json where I have these fields :
> - I doubt that this is not correctly set, because I dont see other way to connect strapi with my bigcommerce theme.
>
> "settings": {
> "strapi_base_url": "what should I put here?(is it url with my cms admin strapi url?)",
> "integration_server_base_url": "And same question, what is integration_server_base_url, where I can find it?",
> "google_captcha_key": "/",
> "bc_app_client_id": "/",
> "google_site_verification": "/",
> ...
> }
In short I need to populate a theme with content from Strapi.
Thanks on your time, and every advice would be nice! 🙂
Big thanks for your answer! My problem was that i couldn't get/display the strap content in the bigcommerce theme which i setup locally. I managed to start a project/bigcommerce theme locally with all the content from strapi. I used stencil init and finally get job done! Reason for not getting Strapi content locally in my BC theme was name of folder and path was not appropriate. I had in the name of the folder "+ ( ) -) and that was a reason :D. I spent a couple of days, now is all ok! :) Big thanks again for help! :) – Dejan just now Edit Delete
To accomplish this, I believe you’ll have to integrate Strapi to the BigCommerce theme - likely using the Scripts API and this Strapi doc: https://strapi.io/documentation/developer-docs/latest/content-api/integrations.html
Depending on what you’re wanting to import into BC, the method could be different.
For example, with importing products to your BC store, you can do a mass import with BC with an external csv file. So if you can export that data into this format the import process is lined out for you here:
Video on Importing Products
Import/Export Overview
However, that example is with a store rather than a theme. Importing to a theme may be a little more complex.
If I may ask -- what all types of content are you trying to export from Strapi?
I’m looking into their docs to see what is possible, as well as reaching out to my team to look for some additional help. :)
I am new at Vue.js.i want to support remote key functionality in Vue.js. So please let me know how to do the app for smart tv.
Maybe caph.js can be used, but it is available only in jquery and angular.
vue and jquery don't mix well together.
//you can add your keyboard keycodes as well(in place of 1,2,3,4)
$(document).ready(function() {
$.caph.focus.init(function(nearestFocusableFinderProvider, controllerProvider) {
controllerProvider.setKeyMap({
LEFT: 1,
RIGHT: 2,
UP: 3,
DOWN: 4
});
});
});
You can devlop Web application for TV following the tutorial:
https://docs.tizen.org/application/web/get-started/tv/first-app
Basing on this site you can just import vue.js file in your application with:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
and use the necessary Vue.js features in Tizen application.
Regarding using a TV-related features, you can check the list of available features here. From your question I cannot guess which module exactly you would like to use.
I've created an app in React Native which allows a user to search for songs, which uses the Apple Music API. So far, so good.
For the next step. What I want to do is use the songs the user has searched for, and let them save them as a playlist in their Apple Music account (assuming they are a subscriber, etc.).
However, there seems to be a lack of documentation and examples on how to do this (at least compared to Spotify - I'm recreating a Spotify App I made in the past).
I'll need to get authorisation from the user, and then use this endpoint: https://developer.apple.com/documentation/applemusicapi/create_a_new_library_playlist, but I can't find out how exactly to do this. Other parts of the API documentation seem to simply state "With proper authorization from the user, you can also create or modify playlists and apply ratings to the user's content." but never actually explain or link to how to get this authorization.
Can anyone point me in the right direction? And let me know if what I'm trying to do is actually possible with Apple Music - it seems like it is, but the way I'm going around in circles, I'm not so sure anymore. Thank you
I don't know if this will help or not (I'm an iOS dev, not a React dev), but here's the call to save a playlist to a user's Music library, in Swift. Maybe it'll help point you in the right direction(?)
If you'd rather not have Swift code polluting your thread, let me know and I'll remove it.
import StoreKit
// ...
// request user token
if let devToken = UserDefaults.standard.string(forKey: "devToken") {
SKCloudServiceController().requestUserToken(forDeveloperToken: devToken, completionHandler: { userToken, _ in
guard let _ = userToken else { return }
self.addPlaylist()
})
}
// add playlist
func addPlaylist() {
MPMediaLibrary.default().addItem(withProductID: "pl.u-065LACYzL34", completionHandler: { _, error in
guard error == nil else {
print("add playlist sad")
return
}
// success
})
}
I've been looking at trying to do this for a while now.
MusicKit JS works in the browser, but since there is no browser in iOS, that's a no-go: there is no Window.musicKit.getInstance(). And I've yet to find any other way to authorize MusicKit, using JavaScript, except for MusicKit JS.
You can access the Apple music Catalog via the API with only a developer token. You can even access (read only) a user's playlist, if it's public and you know the global id, but that's not what we're after here. We want access to a user's Library so that we can do stuff (except delete, because you can't delete stuff through the Apple Music API).
To authorize access to a user's Library in iOS, you need to use StoreKit, per this, and in order to do that with React Native, you need to use Native Modules per this.
The problem about that second bit, is that I got no idea how to do this. I've read a few things, but I'm not connecting the dot's yet.
If you (or anyone) has figured this out, dropping a note with a how-to here would be awesome. If I do figure it out, I'll come back here and post.
Update: I found this article, which comes close to explaining it really well.
The issues I'm having here are that in the Add a React Native iOS Project section, there's an unfinished sentence ("Here we create..."), and I can't seem to find React.xcodeproj when I run through the steps the author has provided.
Additional remarks: you can run Javascript on a Page in Shortcuts but only when you run shortcuts from sharesheet from Safari.
Also, contrary to what you may seen in many tutorials keep in mind that for POST requests a header Music-User-Token has a value without word "Bearer". In GET request using "Bearer" word will also work. I've built webpage to get music-user-token to clipboard and save it to use it in Shortcuts.
I try to follow official document https://pusher.com/tutorials/chat-app-react-native-gifted-chat and it works.
But when I want to set a create user function , I can't find the code from React Native.
I just find it with Node.js https://docs.pusher.com/chatkit/reference/server-node#creating-a-user and with Javascript https://docs.pusher.com/chatkit/quick_start/javascript#create-a-user
If i use Javascript document, it will show error https://docs.pusher.com/chatkit/quick_start/javascript#create-a-user
import Chatkit from "#pusher/chatkit";
const chatkit = new Chatkit.default({
instanceLocator: CHATKIT_TOKEN_PROVIDER_ENDPOINT,
key: CHATKIT_SECRET_KEY
})
There is no default can be used obviously.
Is any way to do it on the mobile application or I must have a backend to do it ?
Any help would be appreciated. Thanks in advance.
Currently you can create users in one of three ways:
Using your Chatkit dashboard's console
From your server code using one of the server SDKs
Using the HTTP API directly
As you'll notice from that list, you can't create a user from the client.
I am trying to use the Google Places API in react native. I first tried using fetch to make requests directly, but I just saw that you have to use the existing classes/objects provided by Google, like the PlacesService. Searching for React Native libraries that include the API objects for you just brings up some that do the autocomplete feature and not much else.
The Places API docs say to load the library using this url: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
This is straightforward to me in regular web dev, but not in react native. What is the standard procedure for loading a library like this in React Native?
Right now I have copy and pasted the JS contents from the link above into a file in my React Native project. But, I don't even know how to export it as I can't really tell what the name of the object/function is. google ? google.maps ?
Right now I am doing:
export default google.maps
and also tried
export default google
but these both throw this error:
cannot read property 'createElement' of undefined
This is my first React Native project, so I'm sorry if this is a basic question.
Thanks for the help.
but I just saw that you have to use the existing classes/objects provided by Google
I'm not sure what you mean by that. Places api can be done via fetch/api request. Look at how react-native-google-places does it at https://github.com/FaridSafi/react-native-google-places-autocomplete/blob/master/GooglePlacesAutocomplete.js#L227
They use a new XMLHttpRequest(); but fetch() would work as well. It is web api and I don't think you need to run any external javascript/load any external js files.