How to set cross-Origin in SetBackgroundImage of fabric js - cross-domain

I am trying to fetch an image from amazon s3 bucket.
I have configured my bucket with CORs header.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>2592000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
My canvas background image is setting like This :
canvas.setBackgroundImage(ImageURL, function () {canvas.renderAll();},
{
top: top,
left: left,
scaleX: scaleFactor,
scaleY: scaleFactor,
crossOrigin: 'anonymous'
});
It works in chrome and Mozilla in windows but not work in Safari on Mac.
I don't understand, where I am wrong.
Please correct me.

I already added a comment but still, this issue looks like this.
and a solution is to set cross-origin in the first request also.

Related

I get cors issue when i try to upload file to S3 with nodejs

I am following this blog here.I am doing evertyhing the same but i still get cors issue.My cors configuration in the S3 looks liek this
https://devcenter.heroku.com/articles/s3-upload-node
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://appName.herokuapp.com/</AllowedOrigin>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

keycloak realmresourceprovider corse

I'm evaluating some IAM Products and encountered a Problem with CORS with the RealmResourceProvider from Keycloak.
The goal is to write an angular4 client able to create user and manage groups with a REST interface from Keycloak.
Server-side:
I tried to implement the Rest interface with the RealmResourceProvider Interface in order to access Realm and User Data as easy as possible.
I followed the Beercloak example (github.com/dteleguin/beercloak) and got it working, but without a custom theme (only the REST-Resources). My own application is packaged as Jar.
I managed to call this Facade via REST Client and it worked (By calling localhost:8080/auth/realms/master/protocol/openid-connect/token first and then stuffing the Token in the Authorization-Header).
keycloak-configuration
But if i test it via Browser, I will need to enable Cross-Origin-Ressource-Sharing. In order to do that I added the 'enable-cors' attribute to the 'keycloak.json' in the server application:
{
"realm": "master",
"auth-server-url": "http://localhost:8080/auth",
"ssl-required": "external",
"resource": "pharmacyRessource",
"public-client": true,
"enable-cors": true
}
Additionally I Created a Client in the Keycloak Admin.
Client Config
Client-Side and Problem:
The angular client uses Mohuks ng2-keycloak service from github.com/mohuk/ng2-keycloak/blob/master/src/keycloak.service.ts to obtain the accesstoken. - Works fine.
But in case i make a GET-request to my Resource, the preflight fails because of missing Access-Control-Allow-Origin Header:
Error 401
The keycloak.json used for initializing the keycloak-client in javascript looks like this:
{
"realm": "master",
"auth-server-url": "http://localhost:8080/auth",
"ssl-required": "external",
"resource": "pharmacyRessource",
"public-client": true
}
My failed solutions:
I tried to implement a CORS Filter, but i didn't succeed because i
couldn't get it registered by keycloak.
I also implemented the #OPTIONS Method and appended CORSE Headers by
myself. Didn't work either, because the Method never got invoked.
I tried to package it as .war in order to enabling a custom
Filter/Provider, but failed at registering the Resources to keycloak.
My testing environment is the offical docker container from hub.docker.com/r/jboss/keycloak/
Do you need enable CORS in your keycloak server (that runs in wildlfy) . You can do it, putting the code bellow into your standalone.xml from wildfly:
<subsystem xmlns="urn:jboss:domain:undertow:4.0">
<buffer-cache name="default"/>
<server name="default-server">
<http-listener name="default" socket-binding="http" redirect-socket="https" enable-http2="true"/>
<https-listener name="https" socket-binding="https" security-realm="ApplicationRealm" enable-http2="true"/>
<host name="default-host" alias="localhost">
<location name="/" handler="welcome-content"/>
<filter-ref name="server-header"/>
<filter-ref name="x-powered-by-header"/>
<filter-ref name="Access-Control-Allow-Origin"/>
<filter-ref name="Access-Control-Allow-Methods"/>
<filter-ref name="Access-Control-Allow-Headers"/>
<filter-ref name="Access-Control-Allow-Credentials"/>
<filter-ref name="Access-Control-Max-Age"/>
<http-invoker security-realm="ApplicationRealm"/>
</host>
</server>
<servlet-container name="default">
<jsp-config/>
<websockets/>
</servlet-container>
<handlers>
<file name="welcome-content" path="${jboss.home.dir}/welcome-content"/>
</handlers>
<filters>
<response-header name="server-header" header-name="Server" header-value="WildFly/10"/>
<response-header name="x-powered-by-header" header-name="X-Powered-By" header-value="Undertow/1"/>
<response-header name="Access-Control-Allow-Origin" header-name="Access-Control-Allow-Origin" header-value="http://localhost"/>
<response-header name="Access-Control-Allow-Methods" header-name="Access-Control-Allow-Methods" header-value="GET, POST, OPTIONS, PUT"/>
<response-header name="Access-Control-Allow-Headers" header-name="Access-Control-Allow-Headers" header-value="accept, authorization, content-type, x-requested-with"/>
<response-header name="Access-Control-Allow-Credentials" header-name="Access-Control-Allow-Credentials" header-value="true"/>
<response-header name="Access-Control-Max-Age" header-name="Access-Control-Max-Age" header-value="1"/>
</filters>
</subsystem>
Keycloak should automatically handle CORS headers for you when you set "enable-cors": true in the client configuration JSON file as you mention.
The reason why the server is not adding the Access-Control-Allow-Origin header is because Keycloak rejects the origin unless the token is configured (via the admin console) to do so. It's very subtle, but it's mentioned in the docs (https://www.keycloak.org/docs/4.1/securing_apps/index.html):
enable-cors
This enables CORS support. It will handle CORS preflight requests. It will also look into the access token to determine valid origins.
Notice the last sentence. The "valid origins" in the "access token" are part of the client configuration, which is set via the admin UI.

OmniFaces complains about missing CDI and empty beans.xml

I like to add omnifaces to my tomcat8 webapp but omnifaces seems to complain either about a missing CDI implementation or about not being able to parse beans.xml (some SAXParserException). Currently I have the following libraries under WEB-INF/lib:
BootsFaces-OSP-0.8.1-dist-default.jar
cdi-api-1.2.jar
javax.el-api-3.0.1-b04.jar
javax.inject-1.jar
javax.interceptor-api-1.2.jar
jsf-api-2.2.11.jar
jsf-impl-2.2.11.jar
jstl-1.2.jar
omnifaces-2.2.jar
primefaces-5.3.jar
weld-core-2.3.3.Final.jar
weld-servlet-2.3.3.Final.jar
weld-servlet-core-2.3.3.Final.jar
Currently I have two issues with this setup:
a real emtpy beans.xml leads to the "nope, please install CDI" error
the following "empty" beans.xml leads to a "cannot parse beans.xml" error
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org /xml/ns/javaee/beans_1_2.xsd"
bean-discovery-mode="annotated"></beans>
The documentation how to install CDI is from 2013 which is kind of outdated in my eyes.
What is wrong or missing in my setup and where to read on how to get omnifaces running in tomcat8?

Upgrading my weld-servlet dependency from 1.1 to 2.2.9 .. common error shows up

I'm getting started with some CDI stuff (coming from a Spring background.) I'm following some war examples online and they typically use an older dependency of weld-servlet such as 1.1.10.Final.
When I use this dependency my sample app works just fine [Tomcat 7]. However, when I try to upgrade to 2.2.9.Final, I end up getting startup error:
Caused by: org.jboss.weld.exceptions.DeploymentException: WELD-001408: Unsatisfied dependencies for type UserTransaction with qualifiers #Default
This happens only when I upgrade.
Currently in this simple webapp I have a single beans.xml file located under WEB-INF (although I also tried adding an extra one under META-INF as well.)
Any ideas what I might be be doing wrong.
It just seems so odd that it works fine under 1.1 but not 2.2 ?
My beans.xml I've tried defining two ways (not sure which one is better.. I've seen both)
<beans xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/beans_1_1.xsd"
bean-discovery-mode="annotated"
>
</beans>
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/beans_1_1.xsd">
</beans>

Cannot stream video from cloudfront with jwplayer

I cannot stream a file from cloudfront with using jwplayer. Here is my code:
jwplayer("container").setup({
file: "mp4:mediaTest.mp4",
height: "480",
provider: "rtmp",
streamer: "rtmp://s1cp0j2rq4xbq.cloudfront.net:1935/cfx/st",
width: "853"
});
You can find the code at http://stritfun.com/
But when I change
file: "mp4:mediaTest.mp4",
with:
file: "http://s3.amazonaws.com/idastreaming/mediaTest.mp4",
streaming succeeded.
What's wrong with file: mp4:mediaTest.mp4 ?
The "streamer/file" setup you are using is used by an older version of JW Player (JW5), but not by the latest version (JW6). We're still going back and forth with Cloudfront to update their docs...
Anyway, setting the RTMP stream with just a single "file" will work for JW6:
file: "rtmp://s1cp0j2rq4xbq.cloudfront.net/cfx/st/mp4:mediaTest.mp4"

Resources