My Code
I want to use props but pictures don't come but other things come so how can I use props in React-Bootstrap (sorry for my English)
error
That error is saying that the image that you're getting has a security policy on it that only allows code that is running on the same server to access it. Pick an image that doesn't have that policy or if it's your image, change the security policy on that image.
To check this, choose a different image from a different server.
Related
I have a requirement where I have to prepare a common template with Sidebar(its menus and icons), header and footer (they will have logo and text content) to display in React application. Plan is to have different template(restrict menu access and logo changes) based on user's role.
We usually keep them as part of FE code in a config file but adding or changing anything means changing react code and restarting the prod server. So the goal is to keep them outside the code to avoid server restarts
I thought of maintaining these data in DB and get it as part of API like Amazon does, but is there any other solution for this requirement. Server Side rendering isn't ideal(Next.js or others) since its already an existing application.
Any Help is appreciated on how to proceed with this.
We use "styled-components": "^4.1.3".
We generate some styled components based on a user-agent detector to work out if it's a mobile or desktop size. And we also do server rendering of styled components.
I've noticed that in the instance that a server css class is generated based on the server user-agent of the request (where it always defaults to mobile size) and then when the component is mounted on the client and its detected to be a desktop size, another class is created.
e.g.
/* sc-component-id: AppContainer__SearchBox-ct8bpk-1 */
.Rfqup{display:none;}.fQihLe{display:block;}
In this example if it's a desktop, we want to show SearchBox. As you can see 2 classes are created.
.Rfqup: in the server as size was detected to be mobile
.fQihLe in the client as the size was detected to be desktop
The issue I'm having is that the I want the client class to be applied instead of the server class - as that is the correct behaviour (i.e. user is on desktop).
But the server class is applied like so:
<div class="AppContainer__SearchBox-ct8bpk-1 Rfqup">
How can I instruct styled components to give preference to the client class "fQihLe"?
Thanks,
I was running into a similar issue where randomly some components looked fine on the ssr initial load, but a refresh or hmr generated a different className on the markup, so styles would be lost. Very strange.
While this doesn't throw any errors, a symptom was this console warning (which went away after the fix was implemented):
Warning: Expected server HTML to contain a matching <h1> in <div>
Which again, was mega strange since the DOM was situation normal after I inspected it.
Anyways, TLDR:
this post from mattyfresh fixed it for me :)
MDN docs state:
To enable a web page to contain an <img> element whose src attribute points to this image,
you could specify "web_accessible_resources" like this:
"web_accessible_resources": ["images/my-image.png"]
The file will then be available using a URL like:
moz-extension://<extension-UUID>/images/my-image.png"
<extension-UUID> is not your extension's ID.
It is randomly generated for every browser instance.
This prevents websites from fingerprinting a browser by examining
the extensions it has installed.
So, I would think that these resources cannot be read by any web page outside the extension, since they would need to know the random UUID.
However, the same MDN docs also state:
Note that if you make a page web-accessible, then any website may then link or redirect
to that page. The page should then treat any input (POST data, for examples)
as if it came from an untrusted source, just as a normal web page should.
I don't understand how "any website may then link or redirect to that page". Wouldn't it need to know the random UUID? How else could a webpage access this resource?
The point of Web Accessible Resources is to be able to include them in a web context.
While you can communicate the random UUID to the webpage so that it can use the file, it doesn't have to be included by the website code itself. Here's a hypothetical scenario:
You're writing an extension that adds a button to evil.com site's UI. That button is supposed to have an image on it.
You bundle the image with your extension, but to add it as src or CSS property to the webpage you need to be able to reference it from a web context.
So, you make it web-accessible, and then inject your UI element with a content script.
Perfectly plausible scenario.
Note that a random third-party site villains-united.com can't just scrape the URL to know if your extension is installed, since the URL is per-browser unique. This is the intent behind WebExtensions's UUID over Chrome's extension-id model.
However, let's continue our hypothetical scenario, from a security perspective.
The operators of evil.com are unhappy with your extra UI. They add a script to their code that looks for added buttons.
That script can see the DOM properties of the button, including the address of the image. Now evil.com's code can see your UUID.
Being the good guy, your extension's source code is available somewhere, including the page that launches nuclear missiles if called (why you would have that and why it would be web-accessible is another matter, perhaps to provide the functionality to good-guys-last-resort.org).
evil.com's script now can reconstruct the URL of this trigger page and XHR it, plunging the planet into nuclear apocalypse. Oops. You probably should've checked the origin of that request.
Basically, if a web-accessible resource is used in a page, the UUID likely leaks to that page's context via DOM. That may not be a page you control.
let me share my problem with you. To begin with I'm a junior-mid level web developer currently implementing a travel site. To deliver this I have a task in which I cannot find an efficient solution.
This travel site will be provided in different hotels. For each hotel, the main theme for the app will be different for example the background images, the colors of some buttons etc. My first suggestion would be to have the CSS files for each hotel and by reading the name of the hotel from the state to import the according css. But the hotels will be many and by using so many files my bundle file will be enormous which I don't need. Another solution would be sending all the colors and images from the server but this will have a use impact in my code and I will have to refactor it in so many places. The idea of the server is fine I think
But I want to use some theme template to makes these changes according to the server. Do you know something about that?
I think there is no need to send all the colors and images from the server. You can store all of it on a frontend part and get only a type from the server and apply different styles based on this type. Maybe this library can help you here.
I need to change the theme (let's say default theme = classic) to the iphone theme (or whatever) when the user has navigated to the liferay portal using a mobile device.
I thought to go about it like this:
- create a hook to gets triggered on a user login event
- check for the device using the User-Agent request header attribute
- if required, set the theme to iphone using LayoutServiceUtil
Probably there is a better approach to implement such a requirement so feel free to offer alternatives.
I'm quite new to liferay so that is probably the reason I could not get this to work.
a. First of all I'm very confused about how themes are handled in liferay; there seem to be various related model objects which are hard to distinguish: Theme, ThemeDisplay, Layout, LayoutSet, ColorScheme, ... . Can someone explain this or know where this is explained?
b. apparently you need to get the ThemeDisplay from the request in order to set a theme on it. However, when the user logs in, the theme attribute (THEME_DISPLAY) has not been set yet (neither in the pre nor post event; it is set when I check during a logout event). Setting the theme during login is an absolute minimum, I was actually hoping I could set the theme before the user logs in but since the attribute is not even known after user logs in...
c. when using LayoutServiceUtil.updateLookAndFeel, you need to give the groupId, themeId, colorSchemeId, css, ... . I was expecting it would be simply telling liferay which theme (name) to use no matter what groupId, ... . Is this not possible?
thanks a lot for any help,
Stijn
P.S. I'm using liferay 6.0.5.
I haven't tried this myself but I'm planning on looking into it:
Milen Dyankov's extensions seem to have a way of letting you select themes based on the user agent all configured in the control panel. You can read his blog about it here.
I could be mistaken but I'm pretty sure the switching happens automatically.
Question a: are you developing your own theme or do you just want to customize it?
Question b: why not set the default themes correctly? Just set it in the settings pannel => layout => dropdown at the bottom
Edit:
I would be wary of using a login.pre hook. While this will update it when you login it means that untill the user actually logs in they may see the wrong theme. I would check it in the default render mode of a portlet on the main page or find a hook that is used on first visiting the page.
A possibility seems to be: servlet.service.events.pre
That way it will be checked every http request. There may be better options. (I am not that familiar with liferay)
And to get the groupId etc you can just use: long groupId = ParamUtil.getLong(actionRequest, "groupId");